Ayrad Ayrad - 1 month ago 10
CSS Question

how to avoid bootstrap 3 nav bar collapsing into two rows

When I resize the window to a medium size the two links on the right collapse and cause the navbar to take two rows even though there is enough space between the right links and the left links.

http://www.bootply.com/fthRQCpN7d

Answer

You could write a @media-query to reduce the left/right padding when it hits the offending breakpoint:

@media(max-width:992px){
.nav>li>a {
padding-left: 10px;
padding-right:10px
    }
}

May not work for every instance, but seems to for your example: http://www.bootply.com/fthRQCpN7d