[Resolved] After Flexbox mobile menu compressed

[blackbird]

Hi, I just changed from Float to Flex. Everything fine BUT not the menu om mobile!

I use Mega menu plugin and in mobile view it now looks like the three blocks in the toogle bar menu is compressed or stacked on top of each other. The logo and the search icon is pushed to the left, on top of the hamburger menu.

What to do?

I have cleared every cache I can find, Mega Menu, Autoptimize and WPEngine.

[Leo]

Hi there,

From what I can see, the plugin hides GP’s default mobile menu toggle and the rest of it is all controlled by the plugin.

Can you check with their support team first?

I also don’t think I’m seeing the same thing as you do:
https://www.screencast.com/t/MkvHbHE7D1

Let me know 🙂

[blackbird]

Hmm ok, you see the same as I do, but before flexbox the logo was centered in the middle (not overlapping the menu) and the magnifier was to the far right.

I have to revert back to my backup and look more into this on a staging site when I have more time. Hopefully find a solution.

[Leo]

How are you centering the logo before?

Can you try turning on the mobile header option?
https://docs.generatepress.com/article/mobile-header/

[blackbird]

Well, it is all done thru the Mega Menu plugin settings, they have a special Mobile Menu with three “toggle bars”/”boxes” that is supposed to span the full width of the mobile screen. Things in the left box is left aligned, in the middle box is centered and in the right box is right aligned. It was working fine before, but seem to have lost something with flexbox. Like it does not understand the full width concept anymore?

I have reverted it back now to float and it is back to normal behaviour.

[blackbird]

I will test GP mobile header option in staging site another day when I have more time. I have used that long time ago, will see if it can be used together with Mega Menu.

[Leo]

Sounds good.

Let me know if you need another look 🙂

[blackbird]

Hi if anoyone finds this thread I just wanted to tell that I found the solution.

The “Max Mega menu” plugin does have special supports pages how to integrate their menu with a lot of different themes, including GP. I´ve had no problem in the past, but after switching to flexbox in GP I found that three “: :after” where gone from the code for the menu area (I compared code in Chrome Inspector before and after the change). For some reason that made the menu from Max Mega Menu not understanding 100 width anymore. I thought it was only on mobile, but now I did see it affected the menu on desktop as well.

Anyhow, the solution was to put the code below from Max Mega menu in my child theme. Problem solved! Menues now 100% width again.

(Thou I do not like to add custom code, you never know what kind of new problem that can provoke in a couple of years…)

function megamenu_remove_main_navigation_class( $classes ) {
	$new_classes = array();
 
	foreach ($classes as $class) {
		if ($class != 'main-navigation') {
			$new_classes[] = $class;
		}
	}
 
	return $new_classes;
}
add_filter("generate_navigation_class", "megamenu_remove_main_navigation_class", 11);

[Leo]

Thanks for sharing!

[blackbird]

And one more note, if anyone else finds the code above helpful.

Remember to delete the code again, if you go back to GP menu again!! (As I just decided to do.) Or else your GP navigation menu will be displayed as a bullet list, since all GP styling is “de-activated” by the code above. (Took me a while to figure that out…)

After a deep dive into development of an older site I found that GP is now so outstanding, and always getting better, that together with plugin User role I can achieve what I want and need without an extra menu plugin.
Happy!! 🙂

[Author]

Posts