Loading page menu width

Hi mustafa,

Please can you update to v2.5.3 (released earlier today).

There is a fix in there that is relevant. I can see you have “removed query strings from static resources”, so you will need to make sure you clear your browser cache. This is very important as the JavaScript has been updated in this version, but without query strings there is no way for your browser to know this – so manually clearing your browser cache is required.

EDIT
I deactivated and activated the plugin and now it is giving and error in console.

jQuery.Deferred exception: e.indexOf is not a function TypeError: e.indexOf is not a function
    at w.fn.init.w.fn.load (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:82468)
    at $.maxmegamenu.plugin.init (https://domein.usualize.nl/bomonti/wp-content/plugins/megamenu/js/maxmegamenu.js:492:23)
    at new $.maxmegamenu (https://domein.usualize.nl/bomonti/wp-content/plugins/megamenu/js/maxmegamenu.js:501:16)
    at HTMLUListElement.<anonymous> (https://domein.usualize.nl/bomonti/wp-content/plugins/megamenu/js/maxmegamenu.js:507:30)
    at Function.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:2573)
    at w.fn.init.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:1240)
    at w.fn.init.$.fn.maxmegamenu (https://domein.usualize.nl/bomonti/wp-content/plugins/megamenu/js/maxmegamenu.js:505:21)
    at HTMLDocument.<anonymous> (https://domein.usualize.nl/bomonti/wp-content/plugins/megamenu/js/maxmegamenu.js:514:29)
    at l (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)
    at c (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function
    at w.fn.init.w.fn.load (jquery.min.js:2)
    at $.maxmegamenu.plugin.init (maxmegamenu.js:492)
    at new $.maxmegamenu (maxmegamenu.js:501)
    at HTMLUListElement.<anonymous> (maxmegamenu.js:507)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.$.fn.maxmegamenu (maxmegamenu.js:505)
    at HTMLDocument.<anonymous> (maxmegamenu.js:514)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

I made sure i cleared my cache after the update but it doesn’t make any change for me. at this moment is use the following css to reduce the whitespace that is being set:

#mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu{
    min-width: 400px;
    overflow: hidden;
}

@media (max-width:768px){
	#mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu{
	    min-width: 200px;
	    overflow: hidden;
	}
}

this is not ideal. im not sure what is causing the issue i hope u could help.
Does it have something the do with that the style is being loaded after the page is loaded maybe? idk?

• This reply was modified 6 years, 3 months ago by mustafa3107.
• This reply was modified 6 years, 3 months ago by mustafa3107.
• This reply was modified 6 years, 3 months ago by mustafa3107.
• This reply was modified 6 years, 3 months ago by mustafa3107.

Oke a deactivated en re activated te plugin and now it’s giving me an error and the width is completely broken.

Uncaught TypeError: e.indexOf is not a function

Hi mustafa,

Ah, I see. This is because you are using a custom version of jQuery (v3.3.1) rather than the default version that is shipped with WordPress. I will add a fix now and get back to you.

Hi mustafa,

I think I have fixed this now.

Please could you install the “WP Rollback” plugin, then use it to install v2.5.3.1 of Max Mega Menu?

It seems that the error is gone now. Also i deleted my css that was reducing the whitespace and your previous update also seemed to fix my issue regarding whitespace. It’s still loading a long menu and after pageload its oke again, but no whitespace(stretch) is left behind so that is oke with me. Thanks for the quick response and fix!

• This reply was modified 6 years, 3 months ago by mustafa3107.
• This reply was modified 6 years, 3 months ago by mustafa3107.

Hi Mustafa,

Great, thanks for the update ??

You can use some CSS like this to give the menu a wider width which will be applied for a split second (before the page fully loads and MMM recalculates the sub menu width):

#mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu {
    width: 500px;
}

Yes but doing that i also need to add media query for the mobile menu because otherwise collapsing my menu on mobile will break page width. and im not sure what this wil do for different mobile besides my phone.

#mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu{
    min-width: 400px;
    overflow: hidden;
}

@media (max-width:768px){
	#mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu{
	    min-width: 200px;
	    overflow: hidden;
	}
}

Hi mustafa,

Try this, under Mega Menu > Menu Themes > Custom Styling:

@include desktop {
    #mega-menu-wrap-navbar #mega-menu-navbar > li.mega-menu-megamenu > ul.mega-sub-menu {
        width: 500px;
    }
}

Yes i get it. Thanks!