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.
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.