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 Avada Special Menu Items, 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.

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.

One is the use of carets. If Click Mode is activated, and Dropdown Carets are enabled, then it is the Carets themselves that need to be clicked to activate the submenu, not the menu item.

This is related to the second issue; the top level menu items. These can be normal page or post links etc, but in this case, clicking on them would redirect the page to the link, and not open the submenu.

So, to avoid these issues when creating a Click Mode Menu, it is best to use custom links set to # as the top level menu item, when a submenu exists, so that if a user clicks on the actual menu item, the submenu will open.

With this item, you can add the Search function to your Menu, rather than using the Search Element. It has a custom Avada Menu Options dialog with just the one setting. With this you choose the style of the Search bar.

With this item, you can add a Log Out option to your Menu. It has an Avada Menu Options dialog with Button, Icon and Highlight styling options.

With this item, you can add a Sliding Bar toggle to your menu. It has a couple of settings around the Icon shown.

With this item, you can add the any Off Canvas to your Menu, allowing you to toggle it via a menu link.

With this item, you can add the WooCommerce Cart to your Menu. It has a custom Avada Menu Options dialog with WooCommerce cart relevant settings.

With this item, you can add the WooCommerce My Account to your Menu. It has a custom Avada Menu Options dialog with settings for the Icon.

The Menu Element allows you to place a menu anywhere on your site, including in a Header Layout in Avada Layouts.

To start, choose where you want to add your menu and add the element into your desired column.

There are five tabs in the Menu Element. The first one, General, is where you select the Menu to display and make some basic configuration settings to do with functionality and alignment. The Main tab is where you configure your selected menu’s appearance and colors. The Submenu tab has its own configuration options for any submenus. The Mobile tab is where you configure your menu for mobile, and the Extras tab offers animation options that allow you to determine how the menu interacts with the loading of the page.

Read on below for full details of all the Menu element options.

Step 1 – Navigate to Appearance > Menus from the WordPress sidebar.

Step 2 – Click the Create A New Menu link. Give your new menu a name, and then click the Create Menu button.

Step 3 – To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different content from the Add Menu Items section.

Step 4 – To add a custom menu item, click the “Custom Links” menu item bar, then enter a custom name and URL into the respective text fields and click “Add to Menu.”

Step 5 – You can further customize the individual Menu Items, but clicking on the Avada Menu Options button on each item.

Step 6 – Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of the menu item above it and it will lock into place. That will set the menu item as child item and will automatically appear as a dropdown menu item.

Step 7 – After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 5 locations in the Theme Locations box.

– Once it’s all done, make sure you click the Save button.

Here is a screenshot that shows you the various areas and descriptions of the menu section described above.

Once you have created you menu, you need to assign it to your site. There are two main ways to do this. Our recommended method is to use the Menu Element in a Header Layout Section (You can also add a Menu anywhere in your page content with the Menu Element). Read more about how this works in the How The Menu Element And Menu Work Together document.

Alternatively, If you are not yet using Avada layouts, and instead using the legacy Headers chosen from the Global Options, then you assign the menu to a specific location in the menu itself. See the Assigning Menus via Global Options document for more information on this.