Bootstrap nav-justified stacks li

Question

I was wondering what does cause the li elements to stack on each other when I use nav-justified.

I ve read there is an issue with IE older versions, but I'm testing it on a new version Chrome.

<div id="header" class="row">
  <div id="backgroundImage" class="pagebg"></div>
  <div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">                     
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="sr-only">toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </div>
</div>

This is my first actual Bootstrap Website and I know there is still lot to learn. There was nothing about the issue in Bootstrap Doc.

Could something being overriding it?

I 've read that there is a bug in safari browsers while using nav-justified. Is it a bad idea to use nav-justified? Should I use css to manipulate the text? Or is there a simple explanation on why is bugging and stacking everything together?

Thank you in advanced

score 3 · Answer 1 · answered Oct 12 '15 at 11:44

3

Remove navbar-nav class from the <ul> element inside

<div id="collapse" class="collapse navbar-collapse">...</div>

If it's set, following CSS rule is applied to your <li> element:

@media (min-width: 768px)
    .navbar-nav > li {
        float: left;
    }
}

The float: left causes that "stack" effect.

answered Oct 12 '15 at 11:44

Ramiz Wachtler

5,623
2
28
33

If this is indeed the solution, OP should just open a browser inspector and spend five seconds himself to check for this, as it is very easy to spot which styles are applied to each element. – klaar Oct 12 '15 at 11:47

score 2 · Accepted Answer · edited May 23 '17 at 12:16

According to the documentation Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Without further CSS tuning, the nav-justified only works for nav-pills and nav-tabs, try changing navbar-nav to tabs or pills.

see http://jsfiddle.net/x3yz13c5/5/

If you insist using navbar-nav try something like

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

Similar thread can be seen here How to justify navbar-nav in Bootstrap 3

Bootstrap nav-justified stacks li

2 Answers2