Mobile Menu – conflict with slicknav?

  • Resolved pttony

    (@pttony)


    4 years, 2 months ago

    I’m using MH Magazine Theme which has “slickNav Responsive Mobile Menu v.1.0.7 built in.

    I can’t figure out how to get max mega menu to replace slickNav on mobile view (mmm works just fine on desktop view).

    I discovered a “scripts.js” file in the theme that contains the code below for SlickNav… would it be possible to comment this out / replace it with something to get the MMM to work for mobile?

    /* SlickNav Responsive Mobile Menu v1.0.7 | MIT license | Copyright 2016 Josh Cope */

    !function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this.settings.duplicate||t.hasOwnProperty(“removeIds”)||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:”MENU”,duplicate:!0,duration:200,easingOpen:”swing”,easingClose:”swing”,closedSymbol:”►”,openedSymbol:”▼”,prependTo:”body”,appendTo:””,parentTag:”a”,closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:””,init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s=”slicknav”,l=”slicknav”;a.prototype.init=function(){var t,a,i=this,s=e(this.element),o=this.settings;if(o.duplicate?i.mobileNav=s.clone():i.mobileNav=s,o.removeIds&&(i.mobileNav.removeAttr(“id”),i.mobileNav.find(“*”).each(function(n,t){e(t).removeAttr(“id”)})),o.removeClasses&&(i.mobileNav.removeAttr(“class”),i.mobileNav.find(“*”).each(function(n,t){e(t).removeAttr(“class”)})),o.removeStyles&&(i.mobileNav.removeAttr(“style”),i.mobileNav.find(“*”).each(function(n,t){e(t).removeAttr(“style”)})),t=l+”_icon”,””===o.label&&(t+=” “+l+”_no-text”),”a”==o.parentTag&&(o.parentTag=’a href=”#”‘),i.mobileNav.attr(“class”,l+”_nav”),a=e(‘<div class=”‘+l+’_menu”></div>’),””!==o.brand){var r=e(‘<div class=”‘+l+’_brand”>’+o.brand+”</div>”);e(a).append(r)}i.btn=e([“<“+o.parentTag+’ aria-haspopup=”true” tabindex=”0″ class=”‘+l+”_btn “+l+’_collapsed”>’,'<span class=”‘+l+’_menutxt”>’+o.label+”</span>”,'<span class=”‘+t+'”>’,'<span class=”‘+l+’_icon-bar”></span>’,'<span class=”‘+l+’_icon-bar”></span>’,'<span class=”‘+l+’_icon-bar”></span>’,”</span>”,”</”+o.parentTag+”>”].join(“”)),e(a).append(i.btn),””!==o.appendTo?e(o.appendTo).append(a):e(o.prependTo).prepend(a),a.append(i.mobileNav);var d=i.mobileNav.find(“li”);e(d).each(function(){var n=e(this),t={};if(t.children=n.children(“ul”).attr(“role”,”menu”),n.data(“menu”,t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return e(this).is(“ul”)?!1:(r.push(this),void(e(this).is(“a”)&&(s=!0)))});var d=e(“<“+o.parentTag+’ role=”menuitem” aria-haspopup=”true” tabindex=”-1″ class=”‘+l+’_item”/>’);if(o.allowParentLinks&&!o.nestedParentLinks&&s)e(r).wrapAll(‘<span class=”‘+l+”_parent-link “+l+’_row”/>’).parent();else{var p=e(r).wrapAll(d).parent();p.addClass(l+”_row”)}o.showChildren?n.addClass(l+”_open”):n.addClass(l+”_collapsed”),n.addClass(l+”_parent”);var c=e(‘<span class=”‘+l+’_arrow”>’+(o.showChildren?o.openedSymbol:o.closedSymbol)+”</span>”);o.allowParentLinks&&!o.nestedParentLinks&&s&&(c=c.wrap(d).parent()),e(r).last().after(c)}else 0===n.children().length&&n.addClass(l+”_txtnode”);n.children(“a”).attr(“role”,”menuitem”).click(function(n){o.closeOnClick&&!e(n.target).parent().closest(“li”).hasClass(l+”_parent”)&&e(i.btn).click()}),o.closeOnClick&&o.allowParentLinks&&(n.children(“a”).children(“a”).click(function(n){e(i.btn).click()}),n.find(“.”+l+”_parent-link a:not(.”+l+”_item)”).click(function(n){e(i.btn).click()}))}),e(d).each(function(){var n=e(this).data(“menu”);o.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,”init”,!0),i.mobileNav.attr(“role”,”menu”),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on(“click”,”.”+l+”_item”,function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on(“keydown”,”.”+l+”_item”,function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),o.allowParentLinks&&o.nestedParentLinks&&e(“.”+l+”_item a”).click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(l+”_collapsed”)?(t.removeClass(l+”_collapsed”),t.addClass(l+”_open”)):(t.removeClass(l+”_open”),t.addClass(l+”_collapsed”)),t.addClass(l+”_animating”),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data(“menu”);a||(a={},a.arrow=e.children(“.”+l+”_arrow”),a.ul=e.next(“ul”),a.parent=e.parent(),a.parent.hasClass(l+”_parent-link”)&&(a.parent=e.parent().parent(),a.ul=e.parent().next(“ul”)),e.data(“menu”,a)),a.parent.hasClass(l+”_collapsed”)?(a.arrow.html(t.openedSymbol),a.parent.removeClass(l+”_collapsed”),a.parent.addClass(l+”_open”),a.parent.addClass(l+”_animating”),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(l+”_collapsed”),a.parent.removeClass(l+”_open”),a.parent.addClass(l+”_animating”),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){var o=this,r=o.settings,d=o._getActionItems(n),p=0;a&&(p=r.duration),n.hasClass(l+”_hidden”)?(n.removeClass(l+”_hidden”),s||r.beforeOpen(i),n.slideDown(p,r.easingOpen,function(){e(i).removeClass(l+”_animating”),e(t).removeClass(l+”_animating”),s||r.afterOpen(i)}),n.attr(“aria-hidden”,”false”),d.attr(“tabindex”,”0″),o._setVisAttr(n,!1)):(n.addClass(l+”_hidden”),s||r.beforeClose(i),n.slideUp(p,this.settings.easingClose,function(){n.attr(“aria-hidden”,”true”),d.attr(“tabindex”,”-1″),o._setVisAttr(n,!0),n.hide(),e(i).removeClass(l+”_animating”),e(t).removeClass(l+”_animating”),s?”init”==i&&r.init():r.afterClose(i)}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children(“li”).children(“ul”).not(“.”+l+”_hidden”);t?i.each(function(){var n=e(this);n.attr(“aria-hidden”,”true”);var i=a._getActionItems(n);i.attr(“tabindex”,”-1″),a._setVisAttr(n,t)}):i.each(function(){var n=e(this);n.attr(“aria-hidden”,”false”);var i=a._getActionItems(n);i.attr(“tabindex”,”0″),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data(“menu”);if(!n){n={};var t=e.children(“li”),a=t.find(“a”);n.links=a.add(t.find(“.”+l+”_item”)),e.data(“menu”,n)}return n.links},a.prototype._outlines=function(n){n?e(“.”+l+”_item, .”+l+”_btn”).css(“outline”,””):e(“.”+l+”_item, .”+l+”_btn”).css(“outline”,”none”)},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(l+”_collapsed”)&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(l+”_open”)&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||”object”==typeof n)return this.each(function(){e.data(this,”plugin_”+s)||e.data(this,”plugin_”+s,new a(this,n))});if(“string”==typeof n&&”_”!==n[0]&&”init”!==n){var i;return this.each(function(){var l=e.data(this,”plugin_”+s);l instanceof a&&”function”==typeof l[n]&&(i=l[n].apply(l,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window);

    jQuery(document).ready(function($){

    $(function(){
    $(‘.mh-header-nav’).slicknav({ prependTo: ‘.mh-header-nav-mobile’, duration: 500, allowParentLinks: true });
    $(‘.mh-main-nav’).slicknav({ prependTo: ‘.mh-main-nav-wrap’, duration: 500, allowParentLinks: true });
    $(‘.mh-footer-nav’).slicknav({ prependTo: ‘.mh-footer-nav-mobile’, duration: 500, allowParentLinks: true });
    });

    });

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter pttony

    (@pttony)

    A few follow-ups…

    I dug around in the theme files and found a few more options… I think the above is incorrect… these seem closer to the removing residual styling you suggest:

    in “header.php” in find this code (which doesn’t seem entirely relevant):
    <body id=”mh-mobile” <?php body_class(); ?> itemscope=”itemscope” itemtype=”https://schema.org/WebPage”&gt;
    <?php mh_before_header();
    get_template_part(‘content’, ‘header’);
    mh_after_header(); ?>

    But then I found this in “content-header.php” which seems to contain the line you suggest to edit out to remove residual styling:

    <nav class=”mh-navigation mh-header-nav mh-header-nav-top clearfix” itemscope=”itemscope” itemtype=”https://schema.org/SiteNavigationElement”&gt;
    <?php wp_nav_menu(array(‘theme_location’ => ‘mh_header_nav’)); ?>
    </nav>

    Should I just add this “content-header.php” to my child theme and edit out the html that directly wraps <?php wp_nav_menu(array(‘theme_location’ => ‘mh_header_nav’)); ?>?

    Plugin Author megamenu

    (@megamenu)

    Hi pttony,

    It should be possible to do this without editing the theme files (although the route you’ve been going down would also work), we can simply hide slicknav and reveal MMM on smaller screens using CSS alone. Please try this:

    https://www.megamenu.com/documentation/mh-magazine/

    Regards,
    Tom

    • This reply was modified 4 years, 2 months ago by megamenu.
    Thread Starter pttony

    (@pttony)

    Thanks Tom! Deeply embarased.. I looked at the theme integration page and didn’t see my theme listed. What a blind spot! I’ve made the adjustment and it’s working.

    One other small issue…

    On a mobile device (ios, on both chrome and safari), the toggle icon (hamburger menu) appears as an outlined box… but on a resized desktop screen it appears as it should. Is there some odd conflict there?

    See image here:
    https://www.dropbox.com/s/kh798qvlnr0krna/IMG_5533.jpg?dl=0

    Thread Starter pttony

    (@pttony)

    Let me add to the above… there seems to be a general problem with icons not appearing at all (on mobile or desktop).

    Oddly, when I’m logged into the back-end of my site, the icons appear. When I log-out, they disappear. Any suggestions on what might be going on? FYI – I placed a “home” icon on the far left of my main nav menu (you can hover over a blank, clickable link there).

    I really hope to get max-mega to work… this is my third attempt at it… each time running into similar obstacles. If I can get the basics up, I definitely intend to upgrade to the premium version. Thank you!

    Thread Starter pttony

    (@pttony)

    Ok – please ignore my long and tedious notes above.. I poked around and found the solution. I’m using the SG-Optimizer… I excluded dashicons from “combine css files” and they now appear! Hopefully, that’s all for the issues for now. Thanks again for your support.

    Plugin Author megamenu

    (@megamenu)

    Hi pttony,

    No need to apologise, I wrote those instructions for you so they wouldn’t have existed if you looked before posting this topic ??

    Glad to hear you have the icon issue sorted too, I spotted that but forgot to mention it.

    Regards,
    Tom

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile Menu – conflict with slicknav?’ is closed to new replies.