title: How to hide desktop menu when using mobile slicknav menu
body: <p>I am working on building a mobile responsive template for my site (a DIY blog)  which is on Blogger (I have it on a private blog until it is ready to go live, so unfortunately I can't show you the exact template) and am using SlickNav for my mobile menu. There is a top "sticky" menu and an additional menu below the header. The top menu works fine, but the second menu shows both the desktop menu and the mobile menu at the same time on mobile. When I set it to "display: none" both disappear instead of just the desktop menu. The top menu is a Blogger "Pages" widget and the second menu is a dropdown html/css menu. </p>
  
  <p>Also, the first menu item jumps on hover. </p>
  
  <p>How do I a) hide the desktop version on mobile b) fix the jump on hover?</p>
  
  <p>This is my first time posting here and I am not a pro at coding, so hopefully I shared everything correctly :) Thanks in advance for your help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*!
      SlickNav Responsive Mobile Menu
      (c) 2014 Josh Cope
      licensed under MIT
  */
  ;
  (function(e, t, n) {
    function o(t, n) {
      this.element = t;
      this.settings = e.extend({}, r, n);
      this._defaults = r;
      this._name = i;
      this.init()
    }
    var r = {
        label: "MENU",
        duplicate: true,
        duration: 200,
        easingOpen: "swing",
        easingClose: "swing",
        closedSymbol: "&amp;#9658;",
        openedSymbol: "&amp;#9660;",
        prependTo: "body",
        parentTag: "a",
        closeOnClick: false,
        allowParentLinks: false,
        nestedParentLinks: true,
        showChildren: false,
        init: function() {},
        open: function() {},
        close: function() {}
      },
      i = "slicknav",
      s = "slicknav";
    o.prototype.init = function() {
      var n = this;
      var r = e(this.element);
      var i = this.settings;
      if (i.duplicate) {
        n.mobileNav = r.clone();
        n.mobileNav.removeAttr("id");
        n.mobileNav.find("*").each(function(t, n) {
          e(n).removeAttr("id")
        })
      } else n.mobileNav = r;
      var o = s + "_icon";
      if (i.label === "") {
        o += " " + s + "_no-text"
      }
      if (i.parentTag == "a") {
        i.parentTag = 'a href="#"'
      }
      n.mobileNav.attr("class", s + "_nav");
      var u = e('&lt;div class="' + s + '_menu"&gt;&lt;/div&gt;');
      n.btn = e("&lt;" + i.parentTag + ' aria-haspopup="true" tabindex="0" class="' + s + "_btn " + s + '_collapsed"&gt;&lt;span class="' + s + '_menutxt"&gt;' + i.label + '&lt;/span&gt;&lt;span class="' + o + '"&gt;&lt;span class="' + s + '_icon-bar"&gt;&lt;/span&gt;&lt;span class="' + s + '_icon-bar"&gt;&lt;/span&gt;&lt;span class="' + s + '_icon-bar"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;');
      e(u).append(n.btn);
      e(i.prependTo).prepend(u);
      u.append(n.mobileNav);
      var a = n.mobileNav.find("li");
      e(a).each(function() {
        var t = e(this);
        var r = {};
        r.children = t.children("ul").attr("role", "menu");
        t.data("menu", r);
        if (r.children.length &gt; 0) {
          var o = t.contents();
          var u = false;
          var a = [];
          e(o).each(function() {
            if (!e(this).is("ul")) {
              a.push(this)
            } else {
              return false
            } if (e(this).is("a")) {
              u = true
            }
          });
          var f = e("&lt;" + i.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + s + '_item"/&gt;');
          if (!i.allowParentLinks || i.nestedParentLinks || !u) {
            var l = e(a).wrapAll(f).parent();
            l.addClass(s + "_row")
          } else e(a).wrapAll('&lt;span class="' + s + "_parent-link " + s + '_row"/&gt;').parent();
          t.addClass(s + "_collapsed");
          t.addClass(s + "_parent");
          var c = e('&lt;span class="' + s + '_arrow"&gt;' + i.closedSymbol + "&lt;/span&gt;");
          if (i.allowParentLinks &amp;&amp; !i.nestedParentLinks &amp;&amp; u) c = c.wrap(f).parent();
          e(a).last().after(c)
        } else if (t.children().length === 0) {
          t.addClass(s + "_txtnode")
        }
        t.children("a").attr("role", "menuitem").click(function(t) {
          if (i.closeOnClick &amp;&amp; !e(t.target).parent().closest("li").hasClass(s + "_parent")) e(n.btn).click()
        });
        if (i.closeOnClick &amp;&amp; i.allowParentLinks) {
          t.children("a").children("a").click(function(t) {
            e(n.btn).click()
          });
          t.find("." + s + "_parent-link a:not(." + s + "_item)").click(function(t) {
            e(n.btn).click()
          })
        }
      });
      e(a).each(function() {
        var t = e(this).data("menu");
        if (!i.showChildren) {
          n._visibilityToggle(t.children, null, false, null, true)
        }
      });
      n._visibilityToggle(n.mobileNav, null, false, "init", true);
      n.mobileNav.attr("role", "menu");
      e(t).mousedown(function() {
        n._outlines(false)
      });
      e(t).keyup(function() {
        n._outlines(true)
      });
      e(n.btn).click(function(e) {
        e.preventDefault();
        n._menuToggle()
      });
      n.mobileNav.on("click", "." + s + "_item", function(t) {
        t.preventDefault();
        n._itemClick(e(this))
      });
      e(n.btn).keydown(function(e) {
        var t = e || event;
        if (t.keyCode == 13) {
          e.preventDefault();
          n._menuToggle()
        }
      });
      n.mobileNav.on("keydown", "." + s + "_item", function(t) {
        var r = t || event;
        if (r.keyCode == 13) {
          t.preventDefault();
          n._itemClick(e(t.target))
        }
      });
      if (i.allowParentLinks &amp;&amp; i.nestedParentLinks) {
        e("." + s + "_item a").click(function(e) {
          e.stopImmediatePropagation()
        })
      }
    };
    o.prototype._menuToggle = function(e) {
      var t = this;
      var n = t.btn;
      var r = t.mobileNav;
      if (n.hasClass(s + "_collapsed")) {
        n.removeClass(s + "_collapsed");
        n.addClass(s + "_open")
      } else {
        n.removeClass(s + "_open");
        n.addClass(s + "_collapsed")
      }
      n.addClass(s + "_animating");
      t._visibilityToggle(r, n.parent(), true, n)
    };
    o.prototype._itemClick = function(e) {
      var t = this;
      var n = t.settings;
      var r = e.data("menu");
      if (!r) {
        r = {};
        r.arrow = e.children("." + s + "_arrow");
        r.ul = e.next("ul");
        r.parent = e.parent();
        if (r.parent.hasClass(s + "_parent-link")) {
          r.parent = e.parent().parent();
          r.ul = e.parent().next("ul")
        }
        e.data("menu", r)
      }
      if (r.parent.hasClass(s + "_collapsed")) {
        r.arrow.html(n.openedSymbol);
        r.parent.removeClass(s + "_collapsed");
        r.parent.addClass(s + "_open");
        r.parent.addClass(s + "_animating");
        t._visibilityToggle(r.ul, r.parent, true, e)
      } else {
        r.arrow.html(n.closedSymbol);
        r.parent.addClass(s + "_collapsed");
        r.parent.removeClass(s + "_open");
        r.parent.addClass(s + "_animating");
        t._visibilityToggle(r.ul, r.parent, true, e)
      }
    };
    o.prototype._visibilityToggle = function(t, n, r, i, o) {
      var u = this;
      var a = u.settings;
      var f = u._getActionItems(t);
      var l = 0;
      if (r) l = a.duration;
      if (t.hasClass(s + "_hidden")) {
        t.removeClass(s + "_hidden");
        t.slideDown(l, a.easingOpen, function() {
          e(i).removeClass(s + "_animating");
          e(n).removeClass(s + "_animating");
          if (!o) {
            a.open(i)
          }
        });
        t.attr("aria-hidden", "false");
        f.attr("tabindex", "0");
        u._setVisAttr(t, false)
      } else {
        t.addClass(s + "_hidden");
        t.slideUp(l, this.settings.easingClose, function() {
          t.attr("aria-hidden", "true");
          f.attr("tabindex", "-1");
          u._setVisAttr(t, true);
          t.hide();
          e(i).removeClass(s + "_animating");
          e(n).removeClass(s + "_animating");
          if (!o) a.close(i);
          else if (i == "init") a.init()
        })
      }
    };
    o.prototype._setVisAttr = function(t, n) {
      var r = this;
      var i = t.children("li").children("ul").not("." + s + "_hidden");
      if (!n) {
        i.each(function() {
          var t = e(this);
          t.attr("aria-hidden", "false");
          var i = r._getActionItems(t);
          i.attr("tabindex", "0");
          r._setVisAttr(t, n)
        })
      } else {
        i.each(function() {
          var t = e(this);
          t.attr("aria-hidden", "true");
          var i = r._getActionItems(t);
          i.attr("tabindex", "-1");
          r._setVisAttr(t, n)
        })
      }
    };
    o.prototype._getActionItems = function(e) {
      var t = e.data("menu");
      if (!t) {
        t = {};
        var n = e.children("li");
        var r = n.find("a");
        t.links = r.add(n.find("." + s + "_item"));
        e.data("menu", t)
      }
      return t.links
    };
    o.prototype._outlines = function(t) {
      if (!t) {
        e("." + s + "_item, ." + s + "_btn").css("outline", "none")
      } else {
        e("." + s + "_item, ." + s + "_btn").css("outline", "")
      }
    };
    o.prototype.toggle = function() {
      var e = this;
      e._menuToggle()
    };
    o.prototype.open = function() {
      var e = this;
      if (e.btn.hasClass(s + "_collapsed")) {
        e._menuToggle()
      }
    };
    o.prototype.close = function() {
      var e = this;
      if (e.btn.hasClass(s + "_open")) {
        e._menuToggle()
      }
    };
    e.fn[i] = function(t) {
      var n = arguments;
      if (t === undefined || typeof t === "object") {
        return this.each(function() {
          if (!e.data(this, "plugin_" + i)) {
            e.data(this, "plugin_" + i, new o(this, t))
          }
        })
      } else if (typeof t === "string" &amp;&amp; t[0] !== "_" &amp;&amp; t !== "init") {
        var r;
        this.each(function() {
          var s = e.data(this, "plugin_" + i);
          if (s instanceof o &amp;&amp; typeof s[t] === "function") {
            r = s[t].apply(s, Array.prototype.slice.call(n, 1))
          }
        });
        return r !== undefined ? r : this
      }
    }
  })(jQuery, document, window)
  //]]&gt;&lt;/script&gt;
  
  
  &lt; script type = 'text/javascript' &gt; //&lt;![CDATA[
    jQuery(document).ready(function($) {
      "use strict";
      $('#top-search a').on('click', function(e) {
        e.preventDefault();
        $('.show-search').slideToggle('fast');
      });
      $('.to-top').click(function() {
        $('html, body').animate({
          scrollTop: 0
        }, 800);
        return false;
      });
      $('.bxslider').bxSlider({
        adaptiveHeight: true,
        mode: 'fade',
        pager: false,
        captions: true
      });
      $(document).ready(function() {
        $(".container").fitVids();
      });
      $('.menu').slicknav({
        prependTo: '.menu-mobile',
        label: ''
      });
      $('#dropdownmenu').slicknav({
        prependTo: '#dropdown'
      });
  
    });
  
  
  
  $('.separator').css('float', '');
  $('.separator,.separator a').css('margin-left', '').css('margin-right', '').css('margin-bottom', '');
  //]]&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/********************************/
  
  /*** Navigation ***/
  
  /********************************/
  
  #dropdownmenu {
    background-color: #ffffff;
    width: 100%;
    color: #009999;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0px;
    padding: 10px 0 0 0;
    position: relative;
    height: 45px;
    border-top: 1px solid #009999;
    border-bottom: 1px solid #009999;
  }
  #dropdown {
    display: inline-block;
    text-align: center;
    margin: 0px;
    padding: 0px;
  }
  #dropdown ul {
    overflow: hidden;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: 1px solid #f3f2ee;
  }
  #dropdown li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border-left: 0px solid #009999;
    border-right: 0px solid #009999;
    height: auto;
  }
  #dropdown li a,
  #dropdown li a:link,
  #dropdown li a:visited {
    color: #009999;
    display: inline-block;
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0px 0px 0px 0px;
    padding: 9px 5px 10px 0px;
    text-decoration: none;
  }
  #dropdown li a:hover,
  #dropdown li a:active {
    background: #ffffff;
    color: #c6c1ae;
    display: block;
    text-decoration: none;
    padding: 9px 5px 10px 0px;
  }
  #dropdown li {
    float: left;
    padding: 0px 66px;
  }
  #dropdown li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 220px;
    margin: 0;
    padding: 0px;
  }
  #dropdown li ul a {
    width: 220px;
  }
  #dropdown li ul ul {
    margin: 0px 0 0 0px;
  }
  #dropdown li:hover ul ul,
  #dropdown li:hover ul ul ul,
  #dropdown li.sfhover ul ul,
  #dropdown li.sfhover ul ul ul {
    left: -999em;
  }
  #dropdown li:hover ul,
  #dropdown li li:hover ul,
  #dropdown li li li:hover ul,
  #dropdown li.sfhover ul,
  #dropdown li li.sfhover ul,
  #dropdown li li li.sfhover ul {
    left: auto;
  }
  #dropdown li:hover,
  #dropdown li.sfhover {
    position: static;
  }
  #dropdown li li a,
  #dropdown li li a:link,
  #dropdown li li a:visited {
    background: #ffffff;
    width: 130px;
    text-align: left;
    color: #009999;
    display: block;
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 0px solid #009999;
  }
  #dropdown li li a:hover,
  #dropdown li li a:active {
    background: #ffffff;
    color: #c6c1ae;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
  }
  #navigation {
    background: #F1F1F1;
    height: 55px;
    position: fixed;
    z-index: 999;
    width: 100%;
    -webkit-backface-visibility: hidden;
    border-bottom: 1px solid #F0F0F0;
  }
  .slicknav_menu {
    display: none;
  }
  #navigation .container {
    position: relative;
  }
  .menu {
    float: left;
  }
  .menu li {
    display: inline-block;
    margin-right: 12px;
    position: relative;
  }
  .menu li a {
    font: $(navbar.text.font);
    font-weight: 400;
    letter-spacing: 2px;
    color: $(navbar.text.color);
    line-height: 55px;
    text-transform: uppercase;
    display: inline-block;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
  }
  ul.sub-menu li:after {
    content: "|";
    padding-left: 10px;
    color: #565656;
    display: none;
  }
  @media only screen and (max-width: 767px) {
    /* second slicknav dropdown menu */
    #dropdown .slicknav_menu {
      width: 100%;
      text-align: center;
      display: block;
      background: #ffffff;
      border-top: 1px solid #009999;
      border-bottom: 1px solid #009999;
    }
    #dropdown .slicknav_btn {
      display: inline-block;
      float: none;
      text-align: center;
    }
    #dropdown .slicknav_menu ul {
      float: left;
      text-align: left;
    }
    .subscribe-box .block,
    .container {
      width: 320px;
    }
    #navigation-wrapper {
      display: none;
    }
    .slicknav_menu {
      display: block;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id='navigation'&gt;
  
    &lt;div class='container'&gt;
      &lt;b:section id='navigation-wrapper' showaddelement='yes'&gt;
        &lt;b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'&gt;
          &lt;b:includable id='main'&gt;
            &lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;
              &lt;h2&gt;&lt;data:title/&gt;&lt;/h2&gt;
            &lt;/b:if&gt;
            &lt;div class='widget-content menu'&gt;
              &lt;b:if cond='data:mobile'&gt;
                &lt;select expr:id='data:widget.instanceId + &amp;quot;_select&amp;quot;'&gt;
                  &lt;b:loop values='data:links' var='link'&gt;
                    &lt;b:if cond='data:link.isCurrentPage'&gt;
                      &lt;option expr:value='data:link.href' selected='selected'&gt;
                        &lt;data:link.title/&gt;
                      &lt;/option&gt;
                      &lt;b:else/&gt;
                      &lt;option expr:value='data:link.href'&gt;
                        &lt;data:link.title/&gt;
                      &lt;/option&gt;
                    &lt;/b:if&gt;
                  &lt;/b:loop&gt;
                &lt;/select&gt;
                &lt;span class='pagelist-arrow'&gt;&amp;amp;#9660;&lt;/span&gt;
  
                &lt;b:else/&gt;
                &lt;ul&gt;
                  &lt;b:loop values='data:links' var='link'&gt;
                    &lt;b:if cond='data:link.isCurrentPage'&gt;
                      &lt;li class='selected'&gt;
                        &lt;a expr:href='data:link.href'&gt;
                          &lt;data:link.title/&gt;
                        &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;b:else/&gt;
                      &lt;li&gt;
                        &lt;a expr:href='data:link.href'&gt;
                          &lt;data:link.title/&gt;
                        &lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/b:if&gt;
                  &lt;/b:loop&gt;
                &lt;/ul&gt;
              &lt;/b:if&gt;
              &lt;b:include name='quickedit' /&gt;
            &lt;/div&gt;
          &lt;/b:includable&gt;
        &lt;/b:widget&gt;
      &lt;/b:section&gt;
  
      &lt;center&gt;
        &lt;!-- start dropdown --&gt;
        &lt;div id="dropdownmenu"&gt;
          &lt;ul id="dropdown"&gt;
            &lt;a class="menuDrop"&gt;
              &lt;li&gt;&lt;a href="/"&gt;START HERE&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;
      DIY&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/diy.html"&gt;Project Gallery&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/monthly-diy-challenge.html"&gt;Monthly DIY Challenge&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/label/round%20up"&gt;Baby&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wedding Crafts&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/home-tour.html"&gt;HOME TOUR&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;
      POPULAR POSTS&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/about.html"&gt;Meet The B's&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/label/baby"&gt;Pregnancy &amp; Baby&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/our-wedding.html"&gt;Wedding&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.theinspiredhive.com/p/home-tour.html"&gt;BLOGGING RESOURCES&lt;/a&gt;
              &lt;/li&gt;
            &lt;/a&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- end dropdown --&gt;
      &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>