Add a CSS Arrow above the menu

Hi David,

Please go to Mega Menu > Menu Themes and add this to the Custom Styling area at the bottom:

#{$wrap} #{$menu} > li.mega-menu-item > ul.mega-sub-menu {
    margin-top: 10px;

    &:before {
      content: "";
      display: block;
      height: 0;
      position: absolute;
      width: 0;
      border: 8px solid transparent;
    }

    &:before {
      border-bottom-color: red;
      position: absolute;
      top: -16px;
      left: 10%;
    }
}

If you need further help (i.e. moving the position of the arrow for each sub menu) it will be a lot more fiddly and not something I would cover under free support, but this should get you started.

Regards,
Tom

Works great – thanks

Like this

You’re welcome. Looks good ??