Support » Plugin: Max Mega Menu » MMM overriding important Divs on desktop

  • SarahDn

    (@sarahdn)


    Hi Tom, love the MaxMegaMenu thank you so much. This is why I’d really like to resolve this issue below & keep using it, rather than deactivating it which is the other option. I’ve searched through the support forums & read the documentation with no success.

    On mobile it works fine. On dekstop, when the MMM plugin is activated, you can’t click the social media icons and basket links in my navbar. My search function in the navbar also disappears. All of these are key functions to my site which is here.

    I’ve tried the reconciliation with my Theme Customizr with no success (it actually removes the social media icons from my .navbar).

    I see you also have a header code suggestion. If you think this would work, can you recommend how to do it via my child theme, instead of deleting direct from header.php?

    I hope you can help as I’d love to keep using Max Mega Menu!
    Sarah

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author megamenu

    (@megamenu)

    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

    SarahDn

    (@sarahdn)

    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

    Plugin Author megamenu

    (@megamenu)

    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

    Plugin Author megamenu

    (@megamenu)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.