I implemented this [Bootstrap 3 Navbar Collapse](https://stackoverflow.com/questions/18192082/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

[![bootstrap menu dropdown](https://i.stack.imgur.com/fAgqB.png)](https://i.stack.imgur.com/fAgqB.png)

I want this for sm-size

[![bootstrap menu dropdown](https://i.stack.imgur.com/Gtp4g.png)](https://i.stack.imgur.com/Gtp4g.png)

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