How The Menu Element And Menu Work Together

28/08/2020

The Menu Element allows you to display and customize an existing Menu, and can be used anywhere in your content. But it will most typically be used in Custom Header Layouts. See the Menu Element documentation for a full rundown of the element and all of its many options, but in this document, we are going to explore how it works in concert with the actual WordPress menu, and review some common situations using the Menu Element.

Using The Menu Element in Header Layouts

Creating Your Menu In WordPress

The first step, before using the Menu Element, is to have an existing menu. Menus are core WordPress business, and are created under Appearance > Menus, from the WordPress dashboard. See our Setting Up A Menu doc, or the WordPress Menu User Guide on the WordPress Codex for detailed information on this step.

The Menu Element then controls how the menu displays, but there also some options to be aware of in the Menu itself, that affect the menu’s appearance.

When creating your menu in WordPress, there are several options with the menu and the menu items that will affect how the menu will display on the page, whether assigned via the WordPress Menu Options, or displayed using the Menu Element.

Please review the Menu Settings doc for a full rundown of what you can configure while building a menu, but these primarily include the Avada Menu Options, found in every menu item, and the Avada Special Menu Items, found at the bottom left of the menu area.

For example, with the Avada Menu Options, you can style a menu item as a button, add an icon or show the menu item only as an icon, add a Menu Highlight Label, or enable a Mega Menu on the item. All of these options would affect how the menu displayed when using the Menu Element, and as such, the styling for such aspects of the menu items would come from the Menu itself, and not the Menu Element.

And with the addition of the Avada Special Menu Items in Avada 7.0, this is where you would add things like WooCommerce iconized menus, Search bars and Sliding Bar Toggles, if wanting to use a menu with the Menu Element.

How The Prebuilt Headers Work

When importing the Prebuilt Headers, do not be concerned if they don’t initially look exactly as the preview. This is because of the above mentioned connection with the actual menu and its settings. When you import a demo Header, the Menu Element uses the first Menu on the site, and the Image Element will only import a logo if one has been uploaded via the options. Therefore, not all of the Layouts will produce a menu like the previews without some extra work, either adding a logo, selecting the appropriate menu, or building a suitable menu for the corresponding area in the template.

For a detailed rundown of each Pre-Built Header, and what you need to customize, please see the Prebuilt Headers for Layouts document.

Choose A Prebuilt Header

How To Add Avada’s Special Menu Items

To see details of each specific Special Menu Item, head to the Avada Special Menu Items doc. When assigning Menus via WordPress, these options are added via the Global Options, but when using the Menu Element, these special items need to be added to the menu itself for them to appear. These are the WooCommerce Cart, the WooCommerce My Account, Search functionality, and the Sliding Bar Toggle.

Each of these Special Items has their own Avada Menu Options panel, and can be added to menus by themselves or with other menu items.

Adding Special Menu Items