[Resolved] Max Mega Menu, mmenu.js, and GP

[Steven]

Looking to get these three to work together. Have had some initial success, but need a hand to figure out a few things.

I’m getting the mega menu to show up. However, it’s on the left side of the top nav similar to what was happening in a different GP support topic. When I try to use an order CSS rule to #mega-menu-wrap-primary it has some unwanted side affect. I tried using the value of 4 since I believe that’s what the GP default “primary-nav” div gets when MMM is disabled. While it does place the mega menu on the right, when the browser is resized, there’s some weird padding or something happening on the right side of the screen and content slides around. Also, GP’s sticky header breaks whenever I add any order rule to the MMM wrapper div.

[Steven]

Hmm – looks like the padding/resize issue might only occur when logged in to WP. Accessing the site anonymously seems to render it correctly – including the sticky header working with the order set to 4 for #mega-menu-wrap-primary. Wonder if there’s a way to get this to work while logged in as well so our authors aren’t confused by the page not rendering normally.

[Steven]

OK – even more weird, this behavior is actually only when Chrome Dev Tools is opened! When dev tools is closed and logged in to WordPress, it works fine :/

[Steven]

If I take the order: 4 rule off of #mega-menu-wrap-primary, it fixes the issue when displaying in Chrome Dev Tools. Is there another way to achieve moving the MMM to the far right of the top nav without using the order rule? You can reproduce the issue by opening the site anonymously in Chrome and then opening the dev tools (F12). Then toggle the order:4 rule for #mega-menu-wrap-primary and resize the responsive window.

[Tom]

Hi there,

I’m not sure I’m seeing the issue. Any chance you can share a screenshot of it so I can take a closer look?

[Steven]

https:\\www.cob.org\Documents\mmm-dev-tools-issue.mp4

[Tom]

That’s super strange, I don’t see why using order would do that. Does the same issue happen if you use the regular GP menu?

[Steven]

The regular GP menu doesn’t have the same affect.

[David]

Hi there,

instead of moving the order up on the navigation try moving the order down on the site logo – you can use order: -1; to force it to the start. Although i am with Tom and can’t see why that would break the sticky nav.

[Steven]

I tried using order: -1 for .navigation-branding and removing the rule for #mega-menu-wrap-primary. The order works and the page looks normal until Chrome Dev Tools is opened. I also hide the #mega-menu-wrap-primary div and applied the order: -1 to the .navigation-branding to see if maybe it was the order rule causing an issue. The issue goes away when the MMM menu is hidden. There must be something in the bit of content causing the issue. I’ve opened a ticket with MMM support. Hopefully they can provide some guidance.

It’s odd to me the MMM nav gets pushed to the left of the logo even though it follows after the branding content in the code. Maybe because the default order is considered 0 if it doesn’t have an order specified and other sibling elements have an order assigned. https://www.w3schools.com/cssref/css3_pr_order.asp

[Steven]

I’m still not sure exactly why the MMM was causing all of the issues in Chrome Dev Tools, but changing the Panel Width in the MMM settings seems to have resolved the padding/overflow issue. I was using a fixed width (800px) and switched over to using an outer width based on the “body” container and 100% inner width. I’m using CSS to provide the padding for each mega menu by ID so that the menu doesn’t take up the full width of the screen on all screens. The only behavior that is still persisting is the sticky header goes blank when scrolling down and then disappears when about a full screen height has been scrolled past. This only occurs when dev tools is active. Any ideas why the sticky header isn’t working as expected when dev tools is activated?

[Tom]

I’ve never seen that before. The element is fixed and set to top: 0, which should stick it to the top of the screen.

However, when dev tools are open, you need to change that to top: 200px-ish for it to show up. It’s like something is tricking the browser. I assume this doesn’t happen either with the regular GP menu?

[Steven]

Do you know if there are negative side affects of adding the following CSS rule:

#sticky-placeholder #mega-menu-wrap-primary {display:none;}

It appears to solve the issue, but I’m unsure if it will break something else. As far as I can tell, it keeps the mega menu primary nav in the sticky header when scrolling down. The mobile menu appears to still be working as well.

[tenchystryder]

If I can just make a comment. I have MMM Pro, and getting it to sit where I want is a nightmare. I opened a ticket with MMM and they blamed a child theme (I don’t use child themes).
The main issues were very similar to above comments but running on a live site, but only when I tried to float the menu. It would float left, but not centre or right.

In the end, I settled to have it above header because it worked fine there on all platforms and at all screen sizes.

Just thought you might like to know it isn’t just you had issues with it

[Steven]

Thanks for your comment tenchystryder. I think I’m getting close to dialing MMM in for GP use finally. I noticed MMM has a page with site themes they provide instructions for integrating with. Would be nice if GeneratePress was added to that list with details on getting this to work correctly. It took me quite a bit of time to try to figure this out and I’ve seen other posts about GP users wanting a mega menu solution.

[Author]

Posts