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.,Overview
Creating The Menu
Customizing The Menu Element,Creating The MenuLet』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.
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.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Customizing The Menu ElementOnce 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.
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.