MMM overriding important Divs on desktop

Hi Sarah,

That doesn’t look like what I’m used to seeing a Divi site look like. I’m not sure if you have made extensive customisations already, or if you are using more plugins that are changing things. I think if you started with a clean Divi site and the Divi Child theme you’d be OK.

Regardless, to fix it, try this custom CSS:

.mega-menu-main .navbar-inner .nav-collapse, .mega-menu-main .navbar-inner .nav-collapse.collapse {
   clear: both !important;
}

.. in fact looking at it closer, you already seem to have some Custom CSS.

Whichever way you do it, the bit you need to concentrate on is making sure the nav-collapse element has clear: both on it. If you inspect it using Dev Tools you’ll see it overlaps the whole header including the cart icon.

Regards,
Tom

Hi Tom, thanks for getting back to me so quickly so I was able to experiment (my Theme is Customizr, not Divi which might explain why it looks different!)

Your custom CSS did indeed help, thank you so much.

The only knock-on effect that it’s had is that on mobile, my Site Title text now overlaps the menu bar, so when you scroll down on mobile, you can’t click on the sticky menu, only on the site title, which takes you back to the homepage.

If you have any ideas how to keep your original fix, while also resolving this, I’d love to hear.

Thank you so much, I’m so pleased I can keep using Max Mega Menu, it’s a great plugin!
Sarah

Hi Sarah,

You’ll need to update that CSS and wrap it in a CSS media query. That way the CSS will only be applied to certain screen sizes (you only want it to be applied to larger screen sizes), and prevent it from being applied to smaller screen sizes (mobiles):

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Regards,
Tom

Tom thank you so much, I get the concept & experimented but couldn’t get this to work. Possibly too advanced for me.

I’ve added this work-around which isn’t perfect, but improves it in the meantime

.mega-menu-main .navbar-inner .nav-collapse,
.mega-menu-main .navbar-inner .nav-collapse.collapse {
    overflow: visible;
    height: auto !important;
     /* top: auto !important; */

Thank you so much again for all your help. If you don’t have any further comments, I’ll mark as resolved.

Sarah

Hi Sarah,

I haven’t looked too closely at your CSS (usually there are many ways to fix the same issue), but I’ve checked in a couple of browsers and it seems what you have done is working well ??

Regards,
Tom