I have mentioned it before in other posts, but the menu styling is lacking in Avada if you use the custom menu element and this is especially true if you are trying to build a megamenu. I think this is evident since none of the recent demos feature the megamenu and the one that did (University) showcases the use of widgets. This is a top feature request on the road map so please vote if you haven’t.

As part of a project I am working on, I needed to get the mega menu to look a little better — by default, a few entries were taking up a lot of space, I needed the titles to be better styled, and I needed the last item in a list to add a little spacing. While it is not perfect and not complete, the following styles are the ones I used to take care of the items I mentioned. I still need to work out box shadow and border radius as the settings in the element editor control the lists within the megamenu container and not the container itself so you und up with some potentially odd result.


.menu--light  .fusion-megamenu-holder {
  border-radius: .5rem;
  padding:.5rem
  }

.menu--light .sub-menu li a>span {
  max-width: 300px;
  line-height:1.2;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 30px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}
.menu--light .fusion-megamenu-title {
  padding: .75rem !important;
}

.menu--light .fusion-megamenu-title::after {
  content: "";
  display: block;
  /* change as needed*/
  border-bottom: 1px solid var(--awb-color5);
}

.menu--light .fusion-megamenu-title span {
  pointer-events: none;
  /* change as needed*/
  color: var(--awb-color5) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  letter-spacing: 0;
  padding: 0 0 4px 0;
}
.menu--light .fusion-megamenu-icon {
  height:20px
}

.menu--light .fusion-megamenu-bullet{
  display:none;
}

.menu--light .fusion-menu-description {
  margin-top:4px;
}
.menu--light .fusion-megamenu {
  box-shadow:none!important;
}
.menu--light ul.fusion-megamenu li{
  border:none !important;
}

Here is a screenshot of the submenu settings that influence this as well.

screenshot of the menu settings

Originally published on July 8, 2022

Borders and Boxes Demo
RSS and Avada

Leave a Reply

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

RELATED ARTICLES

  • 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