Have different content in Bootstrap collapsed navbar

Question

I am using a responsive fixed navbar in Bootstrap 2.3.

Is there a way to have different elements appear in the collapsed version of the navbar? I know that everything that is in the

<div class="nav-collapse collapse">
</div>

section will disappear when the bar is collapsed but I want to have different things appear in the different modes of the bar.

For example have a long button if the bar is in its full mode but when the window is small I'd like to have a small button. I can put a button before the "nav-collapse collapse" div so it will appear in both modes, but it will be the same in both occasions.

Maybe there is a "collapse event" that I could hook into when the bar collapses and then change my elements on the fly?

Answer 1

You could use the responsive utility classes to show/hide different buttons...

<div class="nav-collapse collapse">
        <button type="submit" class="btn hidden-tablet hidden-phone">Big Long Button</button>
        <button type="submit" class="btn hidden-desktop btn-mini">Small</button>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
</div>

Demo: http://bootply.com/92760