Help with Mega Menus

Hi,

I am trying to set up some mega menu columns on my primary nav and I’m having trouble.

I want two columns in one of my dropdowns (please see attached image). I used the mega menu shortcode (“x-megamenu col-2”) and arranged the menu as subitems. However, it’s not working like I want. The tertiary items are creating a second submenu. I would like to make it look like the picture. Any help would be greatly appreciated. Thanks!

Hi Brad,

Thank you for writing in, please add the class x-megamenu col-2 on the parent menu instead.

Features - Megamenus

And it seems you installed the Superfly extension, if you plan on using that extension on your menu please do not combine it with the megamenu classes.

Extension - Superfly
Superfly official documentation
Superfly Demos

Cheers!

Thanks so much. That helped. However, now the second level submenus still aren’t showing up until I hover over the titles. Any idea how I can fix this? Thanks again!

Hi,

To fix it, you can add the code below in Theme Options > CSS

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    opacity: 1;
}

Hope that helps

Thanks so much! That solved the style problem. However, now, when I hover over the top of the page (below the nav bar) the “resources” menu pops up. Is there a way to fix it so that the menu only appears when you hover over the resources link? I’m now working from the live site ( I updated the info in the secure form). Thanks!

Hi,

It’s because of this code.

/* sub menu timing*/
.desktop .menu-item>.sub-menu,
.desktop .menu-item.x-active>.sub-menu {
    transition: all 50ms linear;
    opacity: 0;
    visibility: hidden;
    display: block;

}

.desktop .menu-item:hover>.sub-menu {
    transition: all 250ms linear;
    display: block;
    opacity: 0.99;
    visibility: visible;
    top: 83px;
}

Regretfully we cannot provide support for this custom code as this falls under custom development.

The animation will work better using jquery instead of css

https://api.jquery.com/hover/

Thank you for understanding.

Thanks so much!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.