How do I increase the width of a navbar dropdown?


Tags: html,css,twitter-bootstrap,navbar

Problem :

I'm using bootstrap and trying to put a search form inside a navbar dropdown menu, but I'm finding the form looks squashed because the width of the dropdown is too small. Also, the form elements are not how I would like. How do I fix this?

I'm new to CSS and web design in general. Please help!

Current layout:

current layout screenshot

What I'm trying to achieve:

desired layout screenshot

<header class="navbar navbar-inverse navbar-fixed-top navbar-inverse" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">Brand</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Browse</a></li>
      </ul>
      <ul class="nav navbar-nav">
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Locate <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <button type="button" class="btn btn-default navbar-btn"><li class="icon-screenshot"></li></button>
                <input type="text" class="form-control" placeholder="Address">
              </div>
              <div class="btn-group">
                <button type="submit" class="btn btn-default">Search</button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>
            </form>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">USER <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Link</a></li>
            <li><a href="#"><i class="icon-upload"></i> Link</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="icon-signout"></i> Link</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    </div>
</header>


Solution :

Try this:

.navbar-nav>li>.dropdown-menu { width: yourwidth }

You can add display: inline-block so that its width will be according to its content automatically


    CSS Howto..

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    Symfony2: How to link CSS to HTML part?

    How to reference an embedded image from CSS?

    How to position a div so that it always appear 100px from top of the visible display

    How to implement padding-free sprites in css?

    how to make a css “if opera,not…”

    How to apply css inside a text that is either any html control or without any html control

    How can I change the image folder name in css files dynamically?

    How to fit img into div circle ?

    How to define SVG gradient in page-global CSS file

    How to align 'n' divs horizontally WITH margin/padding?

    css divs display:none reseting and showing divs when function is called

    How to add border/outline/stroke to SVG elements in CSS?

    Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

    How to make balloon textbook talking style using css

    How to style a form action [closed]

    How to test a webpage for different aspect ratios

    How i can remove gap between Menu Box

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    How to select a range of elements in repeated pattern

    how to align a sidebar to the right with css?

    How to center a textarea using CSS?

    How to override all of the CSS for a specific element?

    Shouldn't adapting the scree size of a fluid layout in the desktop show how the site should look for mobile?

    How to make a vertical bar that follows its user in a specific area?

    How to center a text which is placed on an image

    How can I get Outlook to display my tables properly

    Why are items showing up in my instead of [closed]

    How to make css-menu independent of the number of menu items?

    How to put Logo & navigation in one line