title: Twitter Bootstrap Brand Display Only in Collapse Mode
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here's what I've got:</p>
  
  <pre><code>&lt;div class="navbar"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
  
    &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
    &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/a&gt;
  
    &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
    &lt;a class="brand" href="#"&gt;Navigation&lt;/a&gt;
  
    &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
    &lt;div class="nav-collapse collapse"&gt;
      &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
  
          &lt;ul class="nav nav-pills"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle"
                 data-toggle="dropdown"
                 href="#"&gt;
                  Programs
                  &lt;b class="caret"&gt;&lt;/b&gt;
                &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;!-- links --&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program 3&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program A&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program B&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Program C&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt; &lt;!-- closes dropdown menu --&gt;
            &lt;/li&gt; &lt;!-- closes dropdown class --&gt;
          &lt;/ul&gt;   &lt;!-- closes nav-pills --&gt;   
    &lt;/div&gt; &lt;!-- closes collapse --&gt;
  &lt;/div&gt; &lt;!-- closes container --&gt;
  &lt;/div&gt; &lt;!-- closes navbar-inner --&gt;
  &lt;/div&gt; &lt;!-- closes overall navbar --&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any resource might help.</p>
  
  <p>Thanks for your time.</p>
  
  <p>Craig</p>