Bootstrap nav collapse - Menu items not aligning in toggle dropdown

Question

I implemented this Bootstrap 3 Navbar Collapse to change the navbar collapse but I am having a problem with the toggle on the nav.

I put in this for min-width: 992px to make my menu hover open rather than toggle for desktop sizes.

ul.nav li.dropdown:hover ul.dropdown-menu { 
display: block; 
}              /* adding hover effect to bs navbar only for md size and up */

.dropdown-menu > li > a {
text-align: right;
}

The problem I'm having is that when I toggle a menu item in the sm size. The dropdown menu doesn't toggle directly below. It goes off to the right hand side. I can't seem to find what is the css selector that is putting it directly below while the other items "move out of the way"

This is what is happening

I want this for sm-size

Tried to insert my code into bootply... it doesn't collapse properly on there though??? http://www.bootply.com/Q2fqP7kfAK

put a http://www.bootply.com/new# together with your code to replicate the problem. — Jordan.J.D, Sep 10 '14 at 19:21
tried to put in the css with bootply. It doesn't even collpase properly as default thought??? http://www.bootply.com/Q2fqP7kfAK — Clam, Sep 10 '14 at 19:31
this dropdown works for me; but it does not display the problem you claim to have. — Jordan.J.D, Sep 10 '14 at 19:33
this bootply menu doesn't collapse at 991px for me. Does it for you? — Clam, Sep 10 '14 at 19:46

score 0 · Answer 1 · answered Sep 10 '14 at 20:16

0

Found out that the css for changing the collapse had a

.navbar-nav>li {
        float: none;
    }

that caused it to drift off to the side until it hit xs! Removed it and it's a-ok

thanks!

answered Sep 10 '14 at 20:16

Clam

935
1
12
24

score 0 · Answer 2 · answered Jul 10 '15 at 03:00

0

set width for a tag

.dropdown-menu > li > a {
     text-align: right;
     width : 100%;
}

answered Jul 10 '15 at 03:00

dieuvn3b

5,826
3
17
29

Bootstrap nav collapse - Menu items not aligning in toggle dropdown

2 Answers2