How to hide desktop menu when using mobile slicknav menu

Question

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.

Also, the first menu item jumps on hover.

How do I a) hide the desktop version on mobile b) fix the jump on hover?

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!

/*!
    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: "►",
      openedSymbol: "▼",
      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('<div class="' + s + '_menu"></div>');
    n.btn = e("<" + i.parentTag + ' aria-haspopup="true" tabindex="0" class="' + s + "_btn " + s + '_collapsed"><span class="' + s + '_menutxt">' + i.label + '</span><span class="' + o + '"><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span></span></a>');
    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 > 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("<" + i.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + s + '_item"/>');
        if (!i.allowParentLinks || i.nestedParentLinks || !u) {
          var l = e(a).wrapAll(f).parent();
          l.addClass(s + "_row")
        } else e(a).wrapAll('<span class="' + s + "_parent-link " + s + '_row"/>').parent();
        t.addClass(s + "_collapsed");
        t.addClass(s + "_parent");
        var c = e('<span class="' + s + '_arrow">' + i.closedSymbol + "</span>");
        if (i.allowParentLinks && !i.nestedParentLinks && 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 && !e(t.target).parent().closest("li").hasClass(s + "_parent")) e(n.btn).click()
      });
      if (i.closeOnClick && 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 && 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" && t[0] !== "_" && t !== "init") {
      var r;
      this.each(function() {
        var s = e.data(this, "plugin_" + i);
        if (s instanceof o && typeof s[t] === "function") {
          r = s[t].apply(s, Array.prototype.slice.call(n, 1))
        }
      });
      return r !== undefined ? r : this
    }
  }
})(jQuery, document, window)
//]]></script>


< script type = 'text/javascript' > //<![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', '');
//]]></script>

/********************************/

/*** 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;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='navigation'>

  <div class='container'>
    <b:section id='navigation-wrapper' showaddelement='yes'>
      <b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>
        <b:includable id='main'>
          <b:if cond='data:title != &quot;&quot;'>
            <h2><data:title/></h2>
          </b:if>
          <div class='widget-content menu'>
            <b:if cond='data:mobile'>
              <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
                <b:loop values='data:links' var='link'>
                  <b:if cond='data:link.isCurrentPage'>
                    <option expr:value='data:link.href' selected='selected'>
                      <data:link.title/>
                    </option>
                    <b:else/>
                    <option expr:value='data:link.href'>
                      <data:link.title/>
                    </option>
                  </b:if>
                </b:loop>
              </select>
              <span class='pagelist-arrow'>&amp;#9660;</span>

              <b:else/>
              <ul>
                <b:loop values='data:links' var='link'>
                  <b:if cond='data:link.isCurrentPage'>
                    <li class='selected'>
                      <a expr:href='data:link.href'>
                        <data:link.title/>
                      </a>
                    </li>
                    <b:else/>
                    <li>
                      <a expr:href='data:link.href'>
                        <data:link.title/>
                      </a>
                    </li>
                  </b:if>
                </b:loop>
              </ul>
            </b:if>
            <b:include name='quickedit' />
          </div>
        </b:includable>
      </b:widget>
    </b:section>

    <center>
      <!-- start dropdown -->
      <div id="dropdownmenu">
        <ul id="dropdown">
          <a class="menuDrop">
            <li><a href="/">START HERE</a>
            </li>
            <li><a href="#">
    DIY</a>
              <ul>
                <li><a href="http://www.theinspiredhive.com/p/diy.html">Project Gallery</a>
                </li>
                <li><a href="http://www.theinspiredhive.com/p/monthly-diy-challenge.html">Monthly DIY Challenge</a>
                </li>
                <li><a href="/search/label/round%20up">Baby</a>
                </li>
                <li><a href="#">Wedding Crafts</a>
                </li>
              </ul>
            </li>
            <li><a href="http://www.theinspiredhive.com/p/home-tour.html">HOME TOUR</a>
            </li>
            <li><a href="#">
    POPULAR POSTS</a>
              <ul>
                <li><a href="http://www.theinspiredhive.com/p/about.html">Meet The B's</a>
                </li>
                <li><a href="/search/label/baby">Pregnancy & Baby</a>
                </li>
                <li><a href="http://www.theinspiredhive.com/p/our-wedding.html">Wedding</a>
                </li>
              </ul>
            </li>
            <li><a href="http://www.theinspiredhive.com/p/home-tour.html">BLOGGING RESOURCES</a>
            </li>
          </a>
        </ul>
      </div>
      <!-- end dropdown -->
    </center>

Answer 1

I think that there is a little bit messy and it's to much code just for something like that. I would suggest you to start that by yourself from beginning . I have this jsfiddle link here that i have created something small to start. Start making it by yourself and ask again if you have problems. I would suggest you to make those hover menus show and hide with css so you don't need to use to many javascript.

html

<div id="one"></div>
<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

css

#one{
  font-size:1.8em;
}
body{
  background-color: #999;
}

javascript

$(function() {
        $("#one").html("That's what I'm talking about");
        $('#menu').slicknav();
    });

To hide some elements on desktop you can use

@media only screen and (min-width: 768) {
    .el {
        display:none;
    }
}