Flyout Menu


The Avada Flyout menu type is a full screen menu which overlays the main page content, activated by clicking a link/icon in the header area (see example below).

The Flyout Menu is only available when using Header 6 in the Top Header position, or with the Mobile (Responsive) Menu. It’s automatic with Header 6, but with the Mobile Menu, you have to select Flyout in the Theme Options: Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Design Style.

Detailed information regarding the various Avada header layouts to choose from is available here.

IMPORTANT NOTE: Any Child Level menu items will not be displayed on the Flyout menu. Mega Menu features are also disabled on this layout.
Flyout Menu

Flyout Menu Theme Options

Flyout Menu options are found in two places. The main one is found at Avada > Theme Options > Menu > Flyout Menu, while relevant Mobile Menu options for the Flyout Menu are found at Avada > Theme Options > Menu > Mobile Menu when Flyout is selected.

Let’s look at the Flyout Menu Theme Options.

Flyout Menu Icon Padding – This controls the right padding (left on RTL sites) for flyout menu icons.

Flyout Menu Icon Color – This controls the color of the flyout menu icons.

Flyout Menu Background Color – Here you can control both the color and the opacity of the flyout menu background.

Flyout Menu Direction – Here you can control the direction the flyout menu comes from. Choose from Fade, Left, Right, Bottom, or Top.

Flyout Menu Item Padding – This is a new option in Avada 5.8. Here you can control the padding between the flyout menu items.

Flyout Menu Options