navbar-nav gets pushed below navbar-brand?

Question

When the width of my screen reaches 767px, the navigation collapses as excepted. When I go to 768px, the navbar-nav goes below the navbar-brand. It is not until I reach 795px, that the navbar-brand and navbar-nav line up again. These values change depending on how large your navigation is. Here is a jsbin

Answer 1

Your navbar is too wide so there is not enough space for it to stay on the same line. You could reduce the padding of ".nav > li > a" to

padding: 10px 13px;

to avoid the problem

Answer 2

Not sure if this is the cause or not, but try taking some of the padding off of your list items. I believe it's just too wide to fit into that spot on the page at that window size.

Answer 3

The total width of .navbar-header and .navbar-nav is 794px and there is no space for them in the same row. You can change padding for .nav>.li>a to 10px 13px