标签： menus

How To Set Up A Click Mode Menu In The Best Way Using The Menu Element

We are used to menus that open upon hover. But this is not necessarily the best method, either for navigation, or accessibility. With the Menu Element however, you can create menus that open their submenus only on click. But there a few things to be aware of when doing this. Read on…,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.

Setting Up A Menu

Menus are initially created in Appearance > Menus from the WordPress dashboard. They can then be assigned to certain areas within your website, and will display according to your chosen Header layout.
Alternatively, with Avada 7 and up, you can now create fully Custom Headers using Layouts, and assign your menus using the Menu Element. The remainder of this document looks at how you create, assign and set up a menu using the Global Options, but for more information on Custom Headers, check out Introducing Avada Layouts, How To Build A Custom Header, How To Use The Menu Element video, and the Menu Element doc.,OverviewHow To Setup A New Menu
Assigning A Menu
How To Setup Different Menus On A Per Page BasisUseful Videos,How To Setup A New MenuStep 1 – Navigate to the Appearance > Menus section of your admin sidebar.
Step 2 – Click the Create A New Menu link and enter the desired menu name. To save the menu name, 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 left side.
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.
Step 8 – Once its 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.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Assigning A MenuThere are 5 areas where you can assign a menu in Avada. These are: Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages and Sticky Header Navigation. Each of these menu locations can have a custom menu assigned to them. Once a menu is created and assigned to the location, it will be used on the front end for those specified areas.
Main Navigation – This is the Main Menu that shows in the Header area.Top Navigation – This is the top Secondary Menu that can be assigned with headers 2-5.
Mobile Navigation – This is the menu that will be used when viewing on mobile devices. If no menu is chosen, then the desktop menu will appear on mobile views.

404 Useful Pages – This is the Menu that will be used in the 「Helpful Links」 area on the default 404 page, as seen here, and the Search Results Not Found page.
Sticky Header Navigation – You can use this optionally if you want to assign a different menu to the Sticky Header. The Main Menu will be used by defaultMenu Global OptionsWhen assigning Menus, Avada also offers several theme options to help customize the menu. They are located in the Avada > Options > Menu tab. From there, the Global Options will be organized under more specific areas. (e.g. Main Menu, Mobile Menu, Secondary top menu just to name a few). When styling your various menu locations, the settings will be here. For detailed screenshots of the various menu options, see the Menu Section of the Avada Global Options Page.,How To Setup Different Menus On A Per Page BasisSometimes more than one menu is needed for a complex site. There are several reasons for this. A likely case is, when you want to have a one page site with a parallax scrolling menu as a landing page, but also a full site at the same time (see Setting Up A One Page Site for further information). Since the one page site part uses menu anchors for scrolling it will need a different menu than the rest of the site, that will use normal links.
But regardless of why you need multiple menus, with Avada, it』s very easy to achieve. If there is one menu you want mostly on the site, you could assign that in the usual way, as shown above. And then for any pages you want a new menu, just create the alternate menu, go the page, and on the Page Options, select the alternate Menu in the Main Navigation Menu option, as seen below.,Useful VideosSee the How To Create and Assign Menus In Avada video below to get a basic idea of menu creation. In the following video, How To Configure Menus in Avada, we use the Avada University website as an example of how to use both Global Options and Avada Menu Options to configure the menu.

Main Menu Highlight Styles

Menus are critical navigational tools on websites, and you want your menu to be appealing and easy to use. This is where Menu Styles can play an important role. Updated with Avada 5.9, there is now an even larger range of menu highlight styles that can be chosen for adding an indicator to your Main Menu items when they are the active link, or when you hover over a menu item. Let』s take a look below for more details on each style choice.
Overview
Top Bar Highlight Style – The highlight bar is a line of variable thickness, added above the menu item on hover or when the menu item is active.

Bottom Bar Highlight Style – The Bottom Bar highlight style was introduced with Avada 5.9. The highlight bar is a line of variable thickness added below the menu item on hover or when the menu item is active, that grows outward from the center of the menu item.

Arrow Highlight Style – The Arrow highlight style was a feature introduced in Avada 5.1. It adds an Arrow below the menu items when active or hovered over. This will also add an arrow to the top of any dropdown menu items.

Background Highlight Style – The Background highlight style was a feature introduced in Avada 5.1. It will add a background color of your choice, and variable height, to the menu item when active or hovered over.

Color Only Highlight Style – The Color Only highlight style was introduced with Avada 5.9. It will add a color of your choice to the menu item text when active or hovered over.

Main Menu Dropdown Indicator – This feature was improved in Avada 5.6, with the option of having an arrow indicator next to both parent and child level menu items. This is available to all main menu highlight styles.

Vertically Position Your Main Menu – You can set your desired main menu height, then use Theme Options to vertically position your main menu in the header as needed.,Top Bar Highlight StyleYou can choose the Top Bar highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. Primarily, there are three settings which affect the Top Bar highlight style. These are shown below.

Main Menu Highlight Bar Size – This setting will change the size of the highlight bar. Note: If you want there to be no special highlight effect other than the font color change, you can now choose the Color Only style.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Bottom Bar Highlight StyleThe Bottom Bar highlight style is similar to the Top Bar Highlight Style, but with the bar underneath. This option features a smooth underline, that grows outward from the center of the menu item. The same settings will affect the positioning and style of the Bottom Bar highlight style. These are shown below.

Main Menu Highlight Bar Size – This setting will change the size of the highlight bar. Note: If you want there to be no special highlight effect other than the font color change, you can now choose the Color Only style.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Arrow Highlight StyleYou can choose the Arrow highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. This effect will not appear for main menu items when using a transparent header background. However, sub-menu items will still have the lower half of the arrow effect.
This style is most effective when a slider, or page Title Bar, or other colored content sits right up to the header, or if the header itself has a colored background or image. If the header is white, and the content directly below the header is white, the arrows will not be able to be seen.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – This will affect where the arrow starts in relation to the menu』s text. The menu』s text will be centered within its height. So if you set the height to 40px, the menu』s arrow will be roughly 20px below the text. The exact distance can fluctuate based on your specific line-height setting for the menu text. Menu height will also affect the main menu』s position in the header.

Main Menu Arrow Size – These height and width settings will only apply to the actual arrow itself. They will set the starting width of the arrow at its base and the overall arrow height.
IMPORTANT NOTE: For the arrow effect to be noticed coming off the main menu item, your menu height combined with your arrow height will need to be set high enough for the arrow to extend out below the header as seen here.,Background Highlight StyleYou can choose the Background highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. The Background color will cover the whole menu item』s height as set in the Main Menu Height option seen in the example image for this section.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – The Background highlight style will apply a background color for the active menu item. The colored area will be the total height of your main menu. Therefore, you can adjust the height of the background area with the Main Menu Height setting. A menu height that matches the logo height would look like this. A main menu height of a smaller size (in this example, 32px) would look like this.

Main Menu Highlight Background Color – You can use this setting to change the color for the highlighted background area.,Color Only Highlight StyleThe Color Only Menu Highlight style is very similar to the TopBar and Bottom Bar highlight styles, just without the bar. The main option that affects it is the Main Menu Font Hover Color, as listed below.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Main Menu Dropdown IndicatorIn Avada 5.6 and up, you have the option to choose if you want to have an arrow indicator in both parent and child level menus. In previous versions of Avada, the default was currently set to either just parent or none. This option is available on all main menu highlight styles. To set this, go to Avada > Theme Options > Menu > Main Menu.

Main Menu Dropdown Indicator – This will let you display arrow indicator next to parent level menu items, both parent and child level menu items, or no indicator. See example here.,Vertically Position Your Main Menu Using Theme OptionsRegardless of the menu highlight style that you choose, you』ll likely want the option to set your main menu height and not lose the header』s vertically centered appearance. Here we』ll show you which theme options can be adjusted to get the positioning you like best. Your main menu height will affect the distance between the dropdown menu items and the parent menu, the distance your highlight bar is from the menu item, the highlight background color filled area and the position of your main menu in general.
To adjust your Main Menu』s position in the header, follow these steps:

Step 1 – Set your main menu』s height as you want it to be. This setting is located in Avada > Theme Options > Menu > Main Menu.

Step 2 – Check your frontend with the new menu height to see how your main menu and logo are positioned in the header. If you』ve reduced the menu height, you』ll see that your menu has moved up in the header.
Step 3 – If your logo isn』t already even with your main menu, you can adjust the logo』s position in the header through Theme Options > Logo; then adjust the top and bottom margins as needed.
eg. If your logo is vertically positioned lower in the header, you』ll want to reduce the logo』s top margin. If you have a low menu height, try starting at 10px of top margin and adjusting further as needed. The amount needed will vary depending on your logo image』s and Main Menu』s height.Step 4 – Now that your main menu and logo are evenly positioned with each other, you can change their position in the header through Avada > Theme Options > Header > Header Styling > Header Padding. You can adjust this as needed.
Note: Adding padding will not necessarily change the logo/main menu』s position, but rather, it will change the header』s height as the padding is increased. So if you add 20px of bottom padding to the header, the header』s overall height will increase by 20px and that will be reflected in the lower part of the header.
Review – Now that we』ve positioned our menu as needed, you should notice that: 1) Your dropdown menu and your highlight bar are closer to the parent menu item. And 2), if you are using the Background Highlight style, The Highlight Background color is displayed at its appropriate size.

Using The Mega Menu

Avada has a built-in mega menu that can be enabled on every First Level menu item in the Appearance > Menus tab. It can have 1-6 columns, span the full site width, have custom column width settings, display widgets, have icons or images next to menu items and more. Please see below for information on how to set the mega menu up. If you need information on how to create a regular menu, please read our Setting Up The Menu article here.
To see how to build a simple Mega Menu in Avada, please see the 『 How To Use Mega Menus In Avada』 video directly below, or to see how the Mega Menu was configured for the University demo, as shown above, see the video below that, 『How To Configure Menus in Avada』.
How To Create A Mega MenuStep 1 – Navigate to the Appearance > Menus section on your WordPress sidebar and select the 『Create A New Menu』 link to create a new menu, or edit an existing one.
Step 2 – Choose the first level menu item that you wish to open a mega menu with. To enable the Fusion Mega Menu, click the Avada Menu Options button on your chosen menu item, which will launch the Avada menu settings window.
NOTE: Only first level menu items have the Fusion Mega Menu option.
Step 3 – Enable Fusion Mega Menu (image directly after these steps). For the mega menu to show, the enabled first level menu item must have sub-menu items.
Step 4. Check the 『Full Width Mega Menu』 option if you want your mega menu to span the full site width as set in Avada > Theme Options > Layout > Site Width. Further width options can be found in the Fusion Theme Options under Menu > Mega Menu. You can find more information on the Mega Menu』s various width settings here.
Step 5 – Set the 『Mega Menu Number of Columns』 option that will determine how many columns will be displayed. Auto is the default setting, and this will auto detect how many sub menu items you have, but you can also manually control this. For example, if you had 6 sub menu items, you could choose 3 Columns here, which would then create two rows with 3 columns in each.
Step 6 – Each menu item can have a Font Awesome icon, or a custom image thumbnail along with the menu text. There are two separate options where you can select your icon or upload your custom image.
Step 7 – Second Level menu items will display as a title for columns. To add a Second Level item inside the Mega Menu, select a link on the left hand side of your Menu page, and click the 『Add to Menu』 button. To make it a Second Level menu item, drag the menu item below and to the right of the First Level menu item.
Step 8 – The Third Level menu items will be the smaller menu items in each column. To add a Third Level menu item, repeat step 5 above and drag and drop the new menu item below and to the right of the Second Level menu item.
Step 9 – Second & Third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create Widget Areas and how to add Widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 dropdown field. This option is only available when the Fusion Mega Menu option is enabled for the Parent menu item.
Step 10 – After setting up your menu, scroll down to the bottom of the page to the Menu Settings section. Check the 『Main Navigation』 checkbox to assign your new menu as the main navigation. Please reference the image below for more details. Only the Main Navigation will display the Mega Menu.
Step 11 – Once finished, click the 「Save Menu」 button to save your changes made to the menu.
Mega Menu Interface Overview

Adding Buttons To The Menu

In Avada 3.8.5, you can now add buttons to the parent level menu items in both your main menu and top menu navigation areas. This works for both top headers and side headers and is easily done by customizing a setting in the Menu section of your WP admin area. Note that this setting is only available for Parent level items, not dropdown items, and the buttons will pull the styles set in Fusion Theme Options. Continue reading below to learn how to add buttons to the menu.
IMPORTANT NOTE: This feature is only available in Avada 3.8.5 or higher.How To Add Buttons To The MenuStep 1 – Navigate to the Appearance > Menus tab.
Step 2 – Illustrated as A. Create a Parent level item and click the small arrow on the right to expand the Parent Level menu item.
Step 3 – Illustrated as B. The Avada Options are all Avada related menu settings will be found here. Click the button and all the settings will open in a popup window.
Step 4 – Illustrated as C. The menu item style options. Click on the drop-down options and select Button Small, Button Medium, Button Large, or Button XLarge.
Note: The button Styling will be taken from your settings in Theme Options > Fusion Builder Elements > Button Element.
IMPORTANT NOTE: This setting is only available for Parent Level menu items.

Mega Menu Width

Avada includes a flexible Mega Menu that you can use to completely personalize your website』s menu.
You can set each column』s width individually, or have the menu fill the site width, a custom width or 100% width. We will be talking about these options in detail below.
Before reading this article, we recommend reading our introductory article on Using The Mega Menu and how to set this up. For more info on the Mega Menu』s width settings, please continue reading below.
Mega Menu Full WidthYou can choose to set your Mega Menu』s width to span the full site width. Please note that the Mega Menu』s full width option initially adheres to the value set in the Avada > Theme Options > Layout > Site Width option. For example, if you』ve set your Site Width to 1120px the Mega Menu』s full width will equal 1120px. Setting your Mega Menu to full width overrides the individual column widths set in your Second Level menu items.
There are also further Mega Menu Site Width options in the Theme Options under Avada > Theme Options > Menu > Mega Menu. Here you can override that site width with two new options – Custom Width and 100% Width. Read on further below to find out more about these options.
How To Set The Mega Menu To Full WidthStep 1 – Go to WP Dashboard > Appearance > Menus, locate the first level menu item and click the Avada Menu Options button.
Step 2 – Once the settings window has opened, locate and activate the Fusion Mega Menu & Full Width Mega Menu settings as seen in the example image for this section.
Step 3 – Click 『Save』 to close the Avada Options window and scroll to the bottom and click 「Save Menu」 to save your changes made to the menu.
Mega Menu Column WidthYou can also choose to set your Mega Menu』s column widths individually. This gives you more control over your Mega Menu and how you might want to display it. You set each column』s width by entering a percentage, i.e, 25%.
Remember that 100% is equivalent to the value you』ve set in your Site Width option located in Fusion Theme Options. So if you make it so your column widths equal to 100%, you will have a Full Width Mega Menu. For example, if you have 2 columns in your Mega Menu and you set them to 75%, and 25%, you will end up with a Full Width Mega Menu.
How To Set Column Widths IndividuallyStep 1 – Go to WP Dashboard > Appearance > Menus, locate the first level menu item and click the Avada Options button.
Step 2 – Under the same First Level menu item, make sure the Full Width Mega Menu option is set to Off. If the Full Width Mega Menu is enabled, your custom column widths will not show on the second level menu items.
Step 3 – In your Second Level menu item, enter the percentage value for your Column Width under the Mega Menu Column Width field.
Step 4 – Repeat Step 3 for all your Second Level menu items until you』ve set their respective Column Widths.
Step 5 – Click 「Save Menu」 to save your changes made to the menu.
IMPORTANT NOTE: Make sure the Full Width Mega Menu option is unchecked in order for the Mega Menu Column Width option to appear.767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Mega Menu Max-Width Theme OptionsThe Mega Menu Max-Width options are located in Avada > Theme Options > Menu > Mega Menu panel. These options allows you to set a maximum width for the mega menu drop down that is different from the overall site width.
Site WidthThe default value is Site Width, and as long as the Site Width value chosen in Layout > Site Width is in pixels, and not in percentage (%), then the Mega Menu width will automatically match the Site Width.
The Mega Menu needs a pixel value to work correctly, and it cannot take a percentage (%) value. However, the Site Width can take both pixel and percentage (%) values.,100% WidthThe second option is 100% Width. When this is selected, a further option called Mega Menu Interior Content Width appears below this. This option controls the width of the interior content of the mega menu, and two choices appear with this option – Site Width or 100% Width.
Choosing Site Width will make the Mega Menu full width, but the actual menu items will be constrained to the Site Width value. If you select 100% Width, the menu items will stretch across the entire width of the screen.
See the examples below the options panel.
Menu > Mega Menu > Mega Menu Interior Content Width > Site Content
Menu > Mega Menu > Mega Menu Interior Content Width > 100% Width,Custom WidthThe last option is Custom Width. When you select this option, you get another Mege Menu Max Width option below it, and here you input a pixel value. With this options you can make the Mega Menu either smaller or larger than the set Site Width.

Avada Menu Options

The Avada Menu Options are found when editing individual menu items in WordPress Menus (Appearance > Menus). They allow a range of customization to menu items. Read on to discover more about this excellent menu addition, and to see these options in action, watch the video below. It shows the University Main Menu, and how both Theme Options and Avada Menu Options have been used to control the display of the Menu.,Avada Menu OptionsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Avada Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. Second & third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create widget areas and how to add widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Avada Special Menu ItemsIn Avada 7.0, some Special menu Items were added to the Menu page, and these all have their own unique Avada menu Option panels. Please see the Avada Special Menu Items page for more information on these.

Menu Navigation Heights

Setting the main navigation height is important in keeping your website organized and visually appealing. Avada gives you the options to manage this with ease. Continue reading below to discover how to manage your websites main navigation height.
How To Set The Main Menu Navigation HeightStep 1 – Go to Avada > Theme Options > Menu > Main Menu > Main Menu Height.
Step 2 – Enter a numeric value in pixels (px) to adjust the 『Main Menu Height』 or drag the slider left/right.
Step 3 – Click 『Save Changes』.
How To Set The Mobile Menu Navigation HeightStep 1 – Go to Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Dropdown Item Height.
Step 2 – Enter a numeric value in pixels (px) to adjust the 『Mobile Menu Dropdown Item Height』 or drag the slider left/right.
Step 3 – Click 『Save Changes』.

Avada Special Menu Items

On the WordPress Menu page, you will find the Avada Special Menu Items. These are at the bottom of the Add Menu Items dialog, found at Appearance > Menus. You can use these special items to add these specific features to your menu when using the Menu Element. Read on to learn more about the special items.
IMPORTANT NOTE: These special items only work in conjunction with the Menu Element.How To Use The Avada Special Menu ItemsThere are a number of special menu items, that we used to add into the menu automatically. Now, you have full control to place them in the menu where you like, plus more control over the appearance/icon. These items can be added to a menu when you build it, at Appearance > Menus. Each one has their own Avada Menu Options dialog to help style the menu item.
IMPORTANT NOTE: The Avada Special Menu Items ONLY work in Top Level Menu Items.,Avada Special Menu ItemsSearchWith 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.,Sliding Bar ToggleWith this item, you can add a Sliding Bar toggle to your menu. It has a couple of settings around the Icon shown.,Off Canvas ToggleWith this item, you can add the any Off Canvas to your Menu, allowing you to toggle it via a menu link.,WooCommerce CartWith this item, you can add the WooCommerce Cart to your Menu. It has a custom Avada Menu Options dialog with WooCommerce cart relevant settings.,WooCommerce My AccountWith 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.

Menu Settings

To make the most of your menus in WordPress when using Avada, you should be familiar with the various settings and options available when initially creating your menus, at Appearance > Menus, from the WordPress dashboard. These are a mixture of WordPress core menu functions, and third-party and Avada added settings. For an introduction to the core WordPress functionality of Menus, please see the WordPress.org Appearance > Menus Screen documentation.
There are many types of menu items that can be added to a menu. Some of these are core WordPress options, such as Pages, Posts, Custom Links & Categories. Others are added with third-party plugins, such as WooCommerce or The Events Calendar. Yet others are added by Avada, such as the Avada Special Menu Items and the Avada Menu Options.
There are also multiple levels of possible menu items; the Parent Level (or the First Level menu items) and any Child Levels (or sub-level menu items below the Parent Level menu item). There can be up to 4 child levels with Avada.
In each Menu item, you will also find the Avada Menu Options button. See the linked doc for a full rundown, but basically, you can use these options to configure your menu item』s appearance in your menu.
There are also five menu positions available with Avada – Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages, and Sticky Header Navigation. See the Setting Up A Menu doc for more details on this, and other menu related items.
To read more about Mega Menus, please see our Using The Mega Menu document. Read below for more information on Menu Settings in Avada.
IMPORTANT NOTE: This post refers to the options located in the Appearance > Menus section of the WordPress admin. There are also additional Avada menu options in the Avada Theme Options panel.Parent Level Menu SettingsNavigation Label – Illustrated as A. Allows you to add a name to your menu item. In this way, you can change the display name of a menu item.
Title Attribute – Illustrated as B. This will specifies the value for the title attribute of the menu item. This text will only be displayed when a user』s mouse hovers over the menu item.
Link Target – Illustrated as C. Allows you to set the link target to _blank.
Description – Illustrated as D. You can add a description under the Menu item. See the Spa Demo Menu for an example of this.
Avada Options – Illustrated as E. This will open additional menu item settings which are proprietary to Avada. Click the button and you』ll gain access to the additional options listed below, in the next section.
Move – Illustrated as F. Allows you to easily move the menu item to various positions in the Menu Structure.
Original – Illustrated as G. Allows you to view the original page name, which the menu item links to.
Remove – Illustrated as H. Allows you to remove the menu item from the Menu Structure.
Cancel – Illustrated as I. Allows you to cancel or remove the changes made to the menu item and collapse the panel.
Custom Link URL Setting – Illustrated as J. The Custom Link menu item has the additional option of a URL setting. This setting allows you to add a custom link as a menu item.
Under the Screen Options at the top of the screen, there are several options you can turn on or off that will display on the Menu items, such as Link Target & Description.
Avada Menu Options SettingsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. Second & third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create widget areas and how to add widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.