Styling a Megamenu

Share on

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.