Possibly Outdated Content

This content was written a while ago and may no longer be accurate, but remains here for reference purposes.

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 Aug. 8, 2020

Flag Cards
Man crouched next to a video camera, shooting in a dark spaceYouTube® Video Parameters


  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.


  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023