CODEWITHSUNDEEP
csstwitter-bootstrap
Beginner
Beginner

Reputation: 2886

Bootstrap navbar dropdown button

I am trying to achieve a dropdown menu using bootstrap in a navbar. I came across this example and it obviously works perfectly. However I wanted to change the 1st dropdown ( from the left ) to a dropdown button. However if I try and change it to a button the styling gets all messed up ( see image below).

navbar styling

Relevant code:

<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo goes here</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
        <div class="btn-group">
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Hollywood Account</a></li>
            <li><a href="#">Another Account</a></li>
            <li><a href="#">Yet another Account</a></li>
          </ul>
        </div>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>

Upvotes: 2

Views: 10434

Answers (4)

user6161288
user6161288

Reputation:

Drinkin People is correct

Simply changing this:

<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

To this:

<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

It will center your button vertically in the navbar

Upvotes: 1

Steve K
Steve K

Reputation: 9055

There is no reason to have the btn wrapped in a form that makes no sense. In bootstrap 3 you just need to add the class .navbar-btn to the button to have it vertically align in the navbar. Also If you are only going to have the one button there is no reason to use a button group. If you are going to have more than one button then use button group. But the checked answer wrapping it in a form is just silly plus your adding another dom element for no reason. Try the following: 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo goes here</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Hollywood Account</a></li>
            <li><a href="#">Another Account</a></li>
            <li><a href="#">Yet another Account</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Upvotes: 2

Alexander Holman
Alexander Holman

Reputation: 929

wrap the .btn in a wrapper classed as navbar-form to enable the padding as per the example given, like follows:

<ul class="nav navbar-nav">
    <li class="dropdown">
        <!-- doesn't need to be a form element -->
        <form class="navbar-form">
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Hollywood Account</a></li>
                    <li><a href="#">Another Account</a></li>
                    <li><a href="#">Yet another Account</a></li>
                </ul>
            </div>
        </form>
        <!-- example using div and anchor instead of form and button -->
        <div class="navbar-form">
            <div class="btn-group">
                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Hollywood Account</a></li>
                    <li><a href="#">Another Account</a></li>
                    <li><a href="#">Yet another Account</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Here it is on CodePen

Upvotes: 8

arch1ve
arch1ve

Reputation: 183

Simply changing the <a> tag into a <button> tag should do the trick.

 <ul class="nav navbar-nav">
    <li class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Hollywood Account</a></li>
          <li><a href="#">Another Account</a></li>
          <li><a href="#">Yet another Account</a></li>
        </ul>
    </li>
</ul>

Edit: Checked on one of my own sites. Try removing the <div class="btn-group">.

Upvotes: 0

Related Questions