By Stephen Walker

Mega Menu Issues – Avada 7 Custom Header

Share

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.

screenshot of a custom megamenu
Copy to Clipboard

Originally published on August 8, 2020

Most Advanced WordPress Form Builder

4 Comments

  1. Aviatedman September 9, 2021 at 1:47 pm - Reply

    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.

    • Stephen Walker September 9, 2021 at 2:06 pm - Reply

      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).

  2. Chad Markham October 13, 2021 at 9:44 pm - Reply

    What if you want to remove the bullets? Any suggestions?

    • Stephen Walker October 14, 2021 at 4:57 am - Reply

      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;
      }

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.