Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap Brand Display Only in Collapse Mode

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

like image 510
Craig Grella Avatar asked Nov 18 '12 17:11

Craig Grella


1 Answers

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

Bootstrap 4:

display utilities

Source

Bootstrap 4 alpha:

Bootstrap 4 Responsive utilities

Bootstrap 3:

Bootstrap 3 Responsive utilities

Example:

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

Bootstrap 2:

Bootstrap 2 Responsive utilities

Example:

<a class="brand hidden-desktop" href="#">Navigation</a>
like image 199
HaNdTriX Avatar answered Nov 15 '22 18:11

HaNdTriX