Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


style="overflow-y: hidden;"
ul

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

I was about to ask why this was downvoted, considering the fact that this works, but @Jhawins explained the reason for the downvote. Thank you for the help, but a small explanation would definitely help :)

The ul element inherits it's height from the navbar class. Setting an overflow: hidden on the ul element causes anything that is to be displayed outside the height defined by the navbar class to be hidden.

Note
Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" style="padding: 0;">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

I removed the style="overflow-y: hidden;" I'm not sure why that was there in the first place.

Note
Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


By using overflow-y: hidden, you're telling the browser to hide anything that goes beyond the height of the element, and if necessary, show a horizontal scrollbar. In this case, clicking on the dropmenu shows the menu, but the dropmenu's width is larger than the Teams element. If you remove that, then the dropmenu in tablet/desktop views will appear correctly.

In the mobile view, padding: 0 causes the horizontal scrollbar to appear. Bootstrap's grid system works with negative margins, with equally positive paddings. By changing the left and right padding from 15px to 0, you're negating the offset of the left and right margin of -15px, causing horizontal scrollbars.

No idea why this is downvoted as it identifies why the scrollbars appear in the various viewing styles.

Removing both padding: 0 and overflow-y: hidden will result in the menu behaving just like Bootstrap intended. If you're trying to accomplish something other than what Bootstrap has designed, that fact hasn't been made that clear.

Note
Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


style="overflow-y: hidden;"
ul

I was about to ask why this was downvoted, considering the fact that this works, but @Jhawins explained the reason for the downvote. Thank you for the help, but a small explanation would definitely help :)

The ul element inherits it's height from the navbar class. Setting an overflow: hidden on the ul element causes anything that is to be displayed outside the height defined by the navbar class to be hidden.

Note
Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


By using overflow-y: hidden, you're telling the browser to hide anything that goes beyond the height of the element, and if necessary, show a horizontal scrollbar. In this case, clicking on the dropmenu shows the menu, but the dropmenu's width is larger than the Teams element. If you remove that, then the dropmenu in tablet/desktop views will appear correctly.

In the mobile view, padding: 0 causes the horizontal scrollbar to appear. Bootstrap's grid system works with negative margins, with equally positive paddings. By changing the left and right padding from 15px to 0, you're negating the offset of the left and right margin of -15px, causing horizontal scrollbars.

No idea why this is downvoted as it identifies why the scrollbars appear in the various viewing styles.

Removing both padding: 0 and overflow-y: hidden will result in the menu behaving just like Bootstrap intended. If you're trying to accomplish something other than what Bootstrap has designed, that fact hasn't been made that clear.

Note
Rectangle 27 0

html Simple twitter bootstrap navbar dropdown doesn't show the dropdown and instead extends the height of the navbar?


<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" style="padding: 0;">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

I removed the style="overflow-y: hidden;" I'm not sure why that was there in the first place.

Note