I really like the new features available in Avada 7, but there are a couple of frustrations that have appeared post beta. This will address one such frustration – a mega menu in a custom header. The three issues I have noticed so far:
- When you set the mega menu to full width or a custom width, the border radius features go away. While this makes sense for a full width menu, it does not for a custom width (assuming it is smaller than full width)
- The bullets on the sub-menu items of a mega menu go away.
- The headings of a mega menu have no styling available and do not use the text colors set in the submenu or menu options. The should have the same styling capabilities as a header.
Fortunately, these three can be resolved quickly with some simple custom CSS. These are the settings I used on my old site to create this menu.
Copy to Clipboard
Originally published on Aug. 8, 2020
At least you can USE the mega menu on custom header layouts!
I’ve been working on my mega menu for 3 weeks and can’t figure out why the drop down content is stuck at a short height with scrollbars instead of displaying everything I xxxxxxx populate it with! Overlay settings don’t work.
The ONLY way I can display mega menus accurately is to choose of the ridiculous default 7 menu options. Which sucks because that means I can’t use custom layouts at all.
I assume you are referring to the mobile version – yes it is terrible. I have an intranet site with a complex menu and it is horrible on mobile. Check this out – https://www.facebook.com/groups/AvadaUsers/permalink/2303158433162414/. You can use all the other layout features, just not the header (for anybody who reads this).
What if you want to remove the bullets? Any suggestions?
If you are using the custom header builder (recommended most of the time) and menu, the bullets should not be there. If you are using the default header system, you would need something like
.ltr .fusion-menu-element-wrapper .fusion-megamenu-wrapper .fusion-megamenu-holder .fusion-megamenu .sub-menu>li>a .fusion-megamenu-icon {display: none;
}