Geek Answers Handbook

A popup menu appears below the wrong navigation item

I am building a site with Bootstrap 2, and I would like to add a drop-down menu to one item in the navigation bar.

Simple enough. However, when the drop-down list expands, it appears under the wrong item in the navigation bar:

Dropdown menu expanded underneath leftmost navbar element instead of the dropdown container.

Pay attention to the screenshot above that the drop-down menu is displayed under "Administrator" (the left-most element of the navigator) instead of "Locator" (the element that activates the drop-down menu).

How to fix this so that the popup menu appears under the correct navigation item?

Here is the HTML for the navigator:

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="...">Dashboard</a> <div class="nav-collapse collapse pull-right"> <ul class="nav"> <li><a href="...">Admin</a></li> <li><a href="...">Find Trips</a></li> <!-- Locator Dropdown --> <li> <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." data-toggle="dropdown" data-target="#"> Locator <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> <li><a href="...">My Trips</a></li> <li><a href="...">Create Trip</a></li> </ul> </li> <li><a href="...">My Profile</a></li> <li><a href="...">Log Out</a></li> </ul> </div> </div> </div> </div>
+7
source share
1 answer

Your drop-down menu appears in the wrong place because you are missing a class that defines the relative position for the drop-down list. To fix this, simply add the .dropdown class to your menu item with this submenu:

<li class="dropdown"> ... </li>

Here is your fixed markup:

HTML

 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="...">Dashboard</a> <div class="nav-collapse collapse pull-right"> <ul class="nav"> <li><a href="...">Admin</a></li> <li><a href="...">Find Trips</a></li> <!-- Locator Dropdown --> <li class="dropdown"> <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." data-toggle="dropdown" data-target="#"> Locator <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> <li><a href="...">My Trips</a></li> <li><a href="...">Create Trip</a></li> </ul> </li> <li><a href="...">My Profile</a></li> <li><a href="...">Log Out</a></li> </ul> </div> </div> </div> </div>
+10
source

More articles:


All Articles