title: Bootstrap : hide drop down menu when mobile and link to parent
body: <p>I am starting to work with bootstrap and encountered a problem. I would like to have a drop down menu when in desktop view but would like it to be hidden when in mobile view.</p>
  
  <p>I have the <code>&lt;a href=""&gt;</code> (right now www.example.com) set for the parent item. Since it is use to display a drop down the link is going nowhere, which is fine when i'm on desktop. </p>
  
  <p>What I need is to be able to hide the drop down menu in mobile and get the user to the link of the first item. Therefor the whole <code>&lt;ul&gt;</code> would be hidden. I tried using the .hidden-xs class but it will simply hide the <code>&lt;ul&gt;</code> and not use the provided <strong>href</strong>. </p>
  
  <p>Should I simply create two different menus, one for larger devices and one for mobile?</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
    &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="http://www.example.com"&gt;
      Item 1
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Choice1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Choice2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Choice3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>