Mega Menu Width

03/13/2017

Avada includes a flexible Mega Menu that you can use to completely personalize your website. One of its features is the option to set it to full width, or to set each column’s width individually. We will be talking about that 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 Width

You 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 adheres to the value set here -> Avada > Theme Options > Layout > Site Width. 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.

How To Set The Mega Menu To Full Width

Step 1 – Go to WP Dashboard > Appearance > Menus, locate the first level menu item and click the Avada 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 Width

You can also choose to set your Mega Menu’s individual column widths. This gives you more control over your Mega Menu and how you want to display it. You can set each column’s width by entering a percentage. For example, 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 Individually

Step 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 be ignored.

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.

Mega Menu Max-Width

The Mega Menu Max-Width option is located in Avada > Theme Options > Menu > Mega Menu panel. This option allows you to set a maximum width for the mega menu drop down that is different from the overall site width. For example, if you want your site width to be 100% but your mega menu to be smaller, you could enter 1100px for Mega Menu Max Width setting.

As long as the Site Width value is in pixels, and not in percentage (%), then the Mega Menu width will automatically match the Site Width if the Mega Menu Max-Width field is empty.

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.


8 Likes
Proudly Serving Over 390000 Satisfied Users!