title: Disabling hover effect after navbar collapses
body: <p>I have a bootstrap navbar with drop-down menu buttons that automatically drop down when they are hovered over. However, when the menu is collapsed (upon hitting 768px), I want to disable this hover effect, so that the menu drops down only when the buttons are clicked. </p>
  
  <p>I've attempted a few things that didn't work. Right now I'm trying to use a media query to disable the hover effect, but I'm not sure how to proceed. Any advice would be much appreciated!</p>
  
  <pre><code>.dropdown:hover .dropdown-menu {
      display: block;
  }
  
  @media (max-width: 767px) 
  {
      .navbar-fixed-top
      {
          position: relative;
          top: auto;
      }
  
   .dropdown:hover .dropdown-menu {
      /*disable the display:block; property*/
      }
  }
  </code></pre>
  
  <p>EDIT: <a href="http://www.bootply.com/Qs0aARSIFo#" rel="nofollow">Here's a bootply</a> of the code I'm working with. If you click on the mobile icon at the top right of the display you'll be able to see how the bar reacts upon collapsing the menu.</p>