Bootstrap Navbar Collapsing Glitchy When Non-Mobile (fiddle included)

Question

I followed the answer here to get my links to collapse the expanded navbar whenever it's in that dropdown mode:

Programatically toggle bootstrap 3 navigation bar

However when it's NOT in the dropdown mode (desktop), I get a weird "collapse" animation on my regular non-mobile navbar for a split second - it alternates from fading the text of my buttons away between up and down, as if it's trying to collapse the dropped-down navbar that isn't there, so it does it to the content of my main navbar instead.

I have the following code for my menu links:

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <!--ko foreach: authorizedRoutes -->
            <li>
                <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></a>
            </li>
            <!-- /ko -->
        </ul>
      </div>

And this for my collapse icon:

         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" toggle="offline">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

What would be causing this weird glitch?

Here's a jsfiddle where the behavior can be seen - (shrink/expand your browser to see the modes - expanded is where the glitch occurs): http://jsfiddle.net/D2Gsa/11/

Why don't you compare it to one of the examples on GetBootstrap.com - you are missing the navbar-header class which clears the float so you might be missing more classes. — Christina

paulitto paulitto · Accepted Answer · 2014-10-09T13:47:58

As for the question "What would be causing this". You have data-toggle="collapse" for the links, which forces them to collapse the whole list container data-target = ".navHeaderCollapse".

You can fix this by removing that data-toggle="collapse" for links, that would also cause dropdown to not collapse when clicking them in mobile mode

Also you can overwrite animation transitions for your .navHeaderCollapse specifically for non-mobile mode. That way clicking links will collapse whole menu in mobile view but won't do this for wider screens.

@media (min-width: 768px){
    .navHeaderCollapse.collapsing{
        transition:none;
        -webkit-transition:none;
        -moz-transition:none;
        overflow:visible;
     }
}

See updated fiddle

Bootstrap Navbar Collapsing Glitchy When Non-Mobile (fiddle included)

1 Answers