Let's recreate the 'About' mega dropdown menu as seen on the demo site - https://themedemo.commercegurus.com/fintech/


First, within Appearance > Menus, click Screen Options at the top and ensure CSS Classes and Description are ticked.



1. For the menu item you want to turn into a mega dropdown when hovered over, we add a couple of classes to the CSS Classes field.


menu-full-width col-3





2. To create the first column - create a 'Custom Link' on the left hand side and choose #nolink as the URL. The Link Text can be anything you want - it will not be displayed.




Drag it up under the About Us menu item and indent it like so:




CSS Classes

The CSS Classes field should have the class - text


Navigation Label

About heading (this is not displayed - it's just for reference)


Description

The Description field can have any HTML. This is what is in our demo site. Replace the # with a link to your own page.


<h2>About Us</h2>
<p>Learn more about our mission and vision to protect people by using innovation and putting our customers and people first.</p>
<h6><a href="#" class="arrow">DISCOVER THIS SECTION</a></h6>




3. The second column is the easiest - just drag sub menu items under a custom link item such as 'Browse' (this is needed to create a column). I'm just using a # link for this.





4. The final column is much the same as the first one. I've called it 'About feature' as it includes an image within the 'Description' field.



This is the Description markup if you want to recreate it exactly. Replace the # references with your own links.


<a href="#"><img src="http://fintech.commercegurus.com/wp-content/uploads/2016/03/fintech_menu_feature_a.jpg" alt="" /></a>

<h6><a href="#">OUR SOLUTIONS</a></h6>

<h4>Financial Help and Advice</h4>