Wonky justified nav example

[leeaston]

The justified nav example (http://getbootstrap.com/examples/justified-nav) collapses perfectly when the screen is narrowed, but when the screen is expanded it get wonky.

expanded

[liuyl]

I think it's a browser bug, because it works as expected on IE 10 and latest Firefox.

[leeaston]

I tested in latest Safari and Chrome on mac.

[mdo]

This came up before as well—refresh and the browser will fix itself. It's, as far as I can tell, a browser bug specific to WebKit only.

[djbender]

I'm can confirm this bug in Safari 6.0.5 and Chrome 28.0.1500.95 for OS X 10.8.4.

Refreshing did not fix the issue.

[cvrebert]

We should:

• Add a note to the docs about this browser bug
• Add a note to the example about this bug
• And/or consider removing this example on account of this problematic browser bug

[mdo]

Added the note to the docs and fixed up some mobile-first styles for default justified nav items.

I played with this a lot again and got nowhere :.

[naderby]

This is an important design element to leave broken, even if it is a webkit bug.

[davidyeager]

I've been getting the same problem using Chrome and I came up with a simple workaround. Note that I just taught myself javascript yesterday and so I'm sure this workaround can be improved. Basically on resize of the window remove and then add back the nav bar from the dom. Here's the resize function which I placed at the bottom of the header section:

<script> function refresh() { var container = document.getElementById('container'); var masthead = document.getElementById('masthead'); var jumbotron = document.getElementById('jumbotron'); container.removeChild(masthead); container.insertBefore(masthead, jumbotron); } </script>

Then just modify the body html tag to call this on resize. Note that I added the ID's container, masthead, and jumbotron to the respective dom elements. I'm sure there's a way to do without that, but here's what those changes look like:

...
...

<div id="container" class="container">

  <div id="masthead" class="masthead">
    <h1 class="text-muted"><b>My Project</b></h3>
    <ul class="nav nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <!-- Jumbotron -->
  <div id="jumbotron" class="jumbotron">
    <h1>Marketing stuff!</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
    <p><a class="btn btn-lg btn-success" href="#">Get started today</a></p>
  </div>

...
...

I hope this works for you. Good luck!

[misterniall]

I have had success adding this to the navs.less after @media (min-width: @screen-sm-min) { } this hasn't been tested in ie but seems to work in safari and chrome

@media (min-width: @screen-md-min) {
display:inline-block;
}

or this might be better

@media (min-width: @screen-sm-min) {
display:inline-block;
> li {

[takien]

nav-justified make tabs dropdown not working..

[cvrebert]

@takien That's not relevant to this issue.

[LeeMcNeil]

This issue seems to have been resolved in the latest version of Chrome. @mdo

[cvrebert]

@LeeMcNeil Confirmed! I can no longer reproduce on OS X Chrome.

[cvrebert]

Updated docs warnings accordingly: 4cbc8d4

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=138167

[cvrebert]

WebKit bug has been fixed!: http://trac.webkit.org/changeset/190893