Question

I’m working with twitter bootstrap responsive nav bar and I’m trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.

I’m thinking there might need to be some extra js involved but i’m not sure what that is or where to put it.

Here’s what I’ve got:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Navigation</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->

        <ul class="nav nav-pills">
          <li><a href="#">Nav 1</a></li>
          <li><a href="#">Nav 2</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle"
               data-toggle="dropdown"
               href="#">
                Programs
                <b class="caret"></b>
              </a>
            <ul class="dropdown-menu">
              <!-- links -->
              <li><a href="#">Program 1</a></li>
              <li><a href="#">Program 2</a></li>
              <li><a href="#">Program 3</a></li>
              <li class="divider"></li>
              <li><a href="#">Program A</a></li>
              <li><a href="#">Program B</a></li>
              <li><a href="#">Program C</a></li>
          </ul> <!-- closes dropdown menu -->
          </li> <!-- closes dropdown class -->
        </ul>   <!-- closes nav-pills -->   
  </div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->

Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don’t need to see it in larger screen modes.

Any resource might help.

Thanks for your time.

Craig

Answer 1

An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:

Bootstrap 4:

Source

Bootstrap 4 alpha:

Bootstrap 3:

Example:

<a class="brand hidden-lg" href="#">Navigation</a>

Bootstrap 2:

Example:

<a class="brand hidden-desktop" href="#">Navigation</a>