menu items goes into the logo when resizing browser windows

Hi solsikkehaven!

I added a function in Enfold 2.2 which should fix the issue but in your case it does not kick in. I’m not sure why it doesn’t work but please try to replace the entire code in enfold/js/avia.js with the code from here: https://gist.github.com/InoPlugs/ff21a064c574fc154794 – does it change anything? If not please create me a wordpress admin account and send me the login data to: (Email address hidden if logged out) – I’ll look into it.

Best regards,
Peter

Hey!

I fixed it. I had to rewrite my function a bit because it was just intended for the “pull out” mobile menu and not the “dropdown” menu but now / created a separate function which will always check the menu size and resize the paddings of the menu items if necessary.

Best regards,
Peter

Hi!

Yes, it’s actually a problem with the win.on scroll event which does not always work properly. I replaced it with an interval function which checks the header position on a regular basis and re-size the logo/menu if necessary. Please clear your browser cache and check your website again.

Best regards,
Peter

Hello!

Great, I’ll update the code and include it in the next update.

If you think the logo is too small you can try to reduce the number of menu items in the first level and add them to a submenu dropdown or you can try to increase the “switch width” which determines when the mobile menu replaces the standard menu links. Open up enfold/js/avia.js and replace

    	if(first_level_items > 8 && !bottom_menu)
    	{
    		switchWidth = 989;
    		header.addClass('mobile_menu_tablet');
    	}

with

    	if(first_level_items > 7 && !bottom_menu)
    	{
    		switchWidth = 989;
    		header.addClass('mobile_menu_tablet');
    	}

You’re using 8 menu items at the moment this code mod will increase the switch width from 767px to 989px.

Regards,
Peter