CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
xaisoft
xaisoft

Reputation: 3451

navbar-nav gets pushed below navbar-brand?

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

Upvotes: 2

Views: 742

Answers (3)

Kasumi
Kasumi

Reputation: 104

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

Upvotes: 1

codestr
codestr

Reputation: 201

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.

Upvotes: 2

Agnes D
Agnes D

Reputation: 461

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

Upvotes: 3

Related Questions