Weird Navbar/ Mega Menu Behavior

[SidFeyDesigns]

I noticed that for some reason the horizontal mega menu disappears between 960px and 977px screen size.

I also checked the Suivant Demo site and it does the same thing.

This is what is in the pugins.js file for the mobile navigation functions.

f// ---- Mobile Navigation Functions ---- //
    (function(f){if(Array.prototype.forEach){var b=document.body;f=document.querySelector("#js-site-overlay");var g=document.querySelectorAll(".toggle-slide-top"),h=document.querySelectorAll(".toggle-slide-right"),a=document.querySelectorAll(".toggle-slide-bottom"),c=document.querySelectorAll(".toggle-slide-left");document.querySelector(".mobile-menu-top");document.querySelector(".mobile-menu-right");document.querySelector(".mobile-menu-bottom");document.querySelector(".mobile-menu-left");var d;[].slice.call(g).forEach(function(a, c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-top-open";d="mobile-menu-active mobile-menu-top-open"})});[].slice.call(h).forEach(function(a,c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-right-open";d="mobile-menu-active mobile-menu-right-open"})});[].slice.call(a).forEach(function(a, c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-bottom-open";d="mobile-menu-active mobile-menu-bottom-open"})});[].slice.call(c).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-left-open";d="mobile-menu-active mobile-menu-left-open"})});f.addEventListener("click",function(a){a.stopPropagation(); a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""});[].slice.call(document.querySelectorAll(".close-mobile-menu")).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""})})}})(window);

    function mobileNavigation(){function f(){960>=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="&#xf105;" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").prepend(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a>◄ Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;

Not really sure what is causing the weird behavior.

Any help would be appreciated.

Thanks

[SidFeyDesigns]

Here are some screen shots for reference

[Bruce - PhosphorMedia]

This only happen @ 960px. CSS Media queries don't have the concept of Greater/Less Than OR Equal to. So, at 960, the menu is shut off < 960 but mobil doesn't kick in until > 960 (aka 959). CSS Responsive Frameworks where meant to work primarily with different frameworks, not necessarily with what people adjust browser size too.

[SidFeyDesigns]

Ahhh I see. Thank you for that information Bruce. I did use the toggle device toolbar in chrome and put in custom dimensions (ex. 961) and I do see that exact behavior you have explained.

I think I know what to do from here.

Just need to either adjust when the mobile menu toggle button shows up with css or change the dimension in the plugins file to 959 so that at least the mobile menu toggle button will be on screen when the mega menu is transposed to the mobile navigation.

Thanks again for the help.