Behseini
Behseini

Reputation: 6330

How to Align The Navbar dropdown with Navbar Nav in Bootstrap 3

Can you please let me know how I can align the navbar dropdown with it's associated nav? enter image description here As you can see from the picture I have a class="dropdown-toggle" data-toggle="dropdown">About Us and when ever I click on it the dropdown menu appears more toards the left side of the nav!

<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
<ul class="dropdown-menu">  <li><a href="#">About Us</a></li>
                <li class="divider"></li>
                <li><a href="#">Programs</a></li>
                <li class="divider"></li>
                <li><a href="#">Kids News</a></li>
                <li class="divider"></li>
                <li><a href="#">Parents Login</a></li>
                <li class="divider"></li>
                <li><a href="#">Take a Tour</a></li>
</ul>
</li>

Is there any way to allign it with the corner of it's nav toggle?

Upvotes: 0

Views: 833

Answers (1)

bomba1990
bomba1990

Reputation: 437

you need to add to your css code a line like that:

.dropdown-menu{ top: ?; left:?}

replace the '?' with the height of your navbar and test it. to fit your spectatives

EDIT:

By defect, the nav menu is aligned to the corner of the nav parent. you need to check your code.

Upvotes: 1

Related Questions