Full screen nav menu block with avada theme

Question

I have a menu structured exactly how I want it but I need the style to be a bit more refined and specific.

I'm using the avada theme with mega menu functionality, and I've applied it to the first link here:

http://watershedgeo.staging.wpengine.com/

However, I want my dropdown to be full width completely and house the dropdown options in a different style, like this:

https://www.mohawkgroup.com/

So for instance, If i hover over the main one, the full width block menu drops down and next sub headers would be below with any additional headers below that.

Is there a specific way to do this with avada theme and css?

Answer 1

Select the Full Width Mega Menu on/off selector in Avada settings.

Here's the steps to follow covered on that url:

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.

I looked at your site code and your menu has a width of 960px set; Setting it to Full Width should fix this.