Avant

Remove Residual Styling

Avant applies styling to the default theme menu system using !important CSS. When Max Mega Menu is enabled for the main menu, the existing !important CSS is incorrectly applied to Max Mega Menu. The !important CSS applies a white hover color to fonts within mega menus.

First we need to determine the correct file to edit. In the Customizer, work out which header layout you are using:

The different header layouts are numbered and in order. Default Header is loaded from templates/header/header-layout-one.php , Centered Header is loaded from templates/header/header-layout-two.php  and so on.

Copy the correct templates/header/header-layout-X.php file to your Child Theme.

Find:

Replace with:

This edit removes the “main-navigation” class from the menu wrapper, which in turn stops the theme from being able to apply it’s own CSS to the menu.

Mobile Menu Configuration

Avant displays it’s own mobile toggle button, which reveals a slideout panel, on screen widths below 980px.

To synchronise Max Mega Menu with the Avant mobile menu, go to Mega Menu > Menu Themes > Mobile Menu and apply the following settings:

Responsive Breakpoint: 980px
Disable Mobile Toggle: checked

Related Articles