title: Hide one item from menu on mobile
body: <p>I am using Bootstrap to build a menu. When the page is resized for small screens I get my hamburger icon and it shows all items in the menu. Is there a way to hide one item from that menu? I don't want my Cart to show up under the hamburger. I could write some jQuery code myself to do that, but I am wondering if Bootstrap already has a way to do that?</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navMain" aria-expanded="false" aria-controls="navMain"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
              &lt;button type="button" class="navbar-toggle btn-lg"&gt; &lt;span class="sr-only"&gt;Shopping Cart&lt;/span&gt; &lt;span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"&gt;&lt;/span&gt; &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Title&lt;/a&gt; &lt;/div&gt;
          &lt;!-- end navbar-header --&gt;
  
          &lt;div id="navMain" class="navbar-collapse collapse"&gt;
              &lt;div class="navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"&gt;&lt;/span&gt; Cart &lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;My Account &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;
                                  &lt;div class="row" style="width: 400px;"&gt;
                                      &lt;ul class="list-unstyled col-md-3" role="menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                      &lt;ul class="list-unstyled col-md-3" role="menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Option X &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Option Y &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Option Z&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end navMain --&gt; 
      &lt;/div&gt;
      &lt;!-- end container-fluid --&gt; 
  &lt;/nav&gt;
  &lt;!-- end container-fluid --&gt; 
  
  &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt; 
  &lt;!-- Placed at the end of the document so the pages load faster --&gt; 
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
  
  &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt; 
  &lt;script src="js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  </code></pre>