title: How do you make bootstrap nav top-level button clickable link for desktop but not mobile?
body: <p>Bootstrap's default menu behavior is as an activator that works great for mobile devices but doesn't work for desktops if you want the top-level button clickable as a link while at the same time able to activate the dropdown menu upon hover Adding 'disabled' to the link class gets desktop working but breaks mobile, small devices as the dropdown no longer expands, just loads the URL.</p>
  
  <p>To get the click on hover for desktops I added the recommended CSS to the stylesheet.</p>
  
  <pre><code>/* iPad &amp; larger display on hover */
  @media (min-width: 768px) {
    ul.nav li.dropdown:hover ul.dropdown-menu {
      display: block;
    }
  }
  </code></pre>
  
  <p>I set the link nav code adding the disabled class as:</p>
  
  <pre><code>&lt;a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Some Page &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The above gets it working for screens 768px or wider. What I cannot figure out is how to disable the dropdown class for small devices. If it is there then clicking on the item loads the page (somepage.php) as opposed to revealing the sub-items under somepage.php.</p>
  
  <p>Expanded the menu code looks like:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
    &lt;li class="dropdown &lt;?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?&gt;"&gt;
      &lt;a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Some Page &lt;span class="_caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu min-width" role="menu"&gt;
        &lt;li class="mobile-only"&gt;&lt;a href="somepage.php" &lt;?php if ( $this_file == "somepage.php" ) { echo "class=\"active\""; } ?&gt;&gt;Some Page&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="item2.php" &lt;?php if ( $this_file == "item2.php" ) { echo "class=\"active\""; } ?&gt;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="item3.php" &lt;?php if ( $this_file == "item3.php" ) { echo "class=\"active\""; } ?&gt;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>The purpose of the mobile-only item is to give the visitor an option to get to the page once the parent is working as a click activator only.</p>
  
  <p>I tried messing with the bootstrap.css disabled class in the stylesheet but that has no effect on the mobile problem. I searched through the bootstrap.js file and found some references to 'disabled' but don't know enough javascript to mess with this.</p>