title: Bootstrap Navbar Dropdown on Hover if not mobile
body: <p>I am trying to make bootstrap dropdown list from navbar to appear on hover but stop the hover effect on collapsed (mobile). This is what I have in mind, but when I add the if statement the whole effect doesnt work: 
  HTML:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;a class="navbar-brand vaos" href="../index.html"&gt;VAOS&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="collapse navbar-collapse navbar-right"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a class="trans" href="../index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;What is VAOS &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="options.html"&gt;VAOS &amp; Other Options&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="candidate.html"&gt;Am I a Candidate&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="surgeon.html"&gt;Find a Surgeon&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;div class="ArrowUp1"&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
  
            &lt;li&gt;&lt;a href="experience.html"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Resources &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="clinical-support.html"&gt;Clinical Support&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="videos.html"&gt;Procedural Videos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="resources.html"&gt;Other Links &amp; Resources&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;div class="ArrowUp2"&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
    CSS:</p>
  
  <pre><code>@media (min-width: 768px) {
    .navbar-nav .open ul {
      display: none;
    }
    .navbar-default .navbar-nav &gt; .open &gt; a,
    .navbar-default .navbar-nav &gt; .open &gt; a:hover,
    .navbar-default .navbar-nav &gt; .open &gt; a:focus {
      color: #555;
      background: none;
    }
    .navbar-default .navbar-nav &gt; li:hover {
      background: #e7e7e7;
    }
    .navbar-inverse .navbar-nav &gt; .open &gt; a,
    .navbar-inverse .navbar-nav &gt; .open &gt; a:hover,
    .navbar-inverse .navbar-nav &gt; .open &gt; a:focus {
      color: #969696;
      background: none;
    }
    .navbar-nav &gt; li:hover {
      background: transparent !important;
    }
    .navbar-nav .hovernav:hover &gt; .dropdown-menu {
      display: block;
    }
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>'use strict';
  
  $('ul.nav li.dropdown').hover(function() {
    if(window.width &gt; 767) {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    }   
  });
  </code></pre>