How To Create Flyout Menus in Avada Layouts

05/11/2020

In Avada Layouts, it is possible to create Flyout menus, using features from the Menu Element and the Menu itself. Read on to find out how to do this, and watch the video for a visual overview.

Creating The Menu

Let’s start with the actual menu to be displayed. To create a menu suitable for a Flyout menu, head to Appearances > Menus from the WordPress dashboard. The key to creating a suitable menu lies in the need to have your pages as sub items to the parent menu items. For our example, we are creating an iconized header menu, so the top level items are only designed to trigger the flyout menus. For the top level main menu item, the pages are then added as child menu items to this main item.

The other top level menu items are all Avada Special Menu Items, and all have been made to be Icon only, via the Avada Menu Options. At this point, our menu looks like this, as seen in the screenshot below. Note, also, that the menu has not been assigned a Display Location, as that will be achieved in the Header Layout, with the use of the Menu Element.

Flyout Menu > Structure

To make the menu items to only display as Icons, head to the Avada Menu Options, found in each top level menu item, and select an icon, and set Icon/Thumnbnail Only option to On, as seen below.

Flyout Menu > Icon Settings

Customizing The Menu Element

Once the menu has been built, you can add the Menu Element to a Header Layout Section. For this example, I used a prebuilt Header Layout Section, as it was designed for a flyout menu.

Once you assign the menu to be used in the Element, it’s time to customize it. You can customize both the Main Menu items, and the Submenu Items. These are generally individual design choices but the important option to get it to function as a Flyout Menu is to have Flyout selected in the Submenu > Submenu Mode option. If you wish to use the Flyout menu across all screen sizes, also ensure that the Mobile > Collapse to Mobile Breakpoint option is set to Never, so that the same menu is used on all screen sizes.

OK, that’s it. You will now have an iconized main menu that triggers a Flyout menu. As you can see in the image below, the Submenu Mode is set to Flyout, and the menu items are just icons in the header.

Flyout Menu > Submenu > Flyout Settings

On the front end, you can see below how the flyout menu was customized for our example. This is the Woo MyAccount menu item that is opened. Note how it has a partially transparent background, and custom colors. These are all set in the Sub Menu panel of the menu Element. Note the X in the top right to close the menu.

Flyout Menu > Triggered