Let's recreate the 'About Us' mega dropdown menu as seen on the demo site - https://themedemo.commercegurus.com/success
First, within Appearance > Menus, click Screen Options at the top and ensure CSS Classes and Description are ticked.
Also tick 'Custom Links' is not already 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. This will make it full width and 4 columns.
menu-full-width col-4
2. Next, we nest our Columns under the main About Link like so:
You'll see the phrase 'Custom Link' such as used for Meet Success. This has two purposes. It serves as a heading and the column container so regular links can be displayed below it.
You'll find the Custom Link on the left hand side:
I'm just using a # tag - so the link doesn't go anywhere.
The more interesting structure is the next 3 columns. First the 'Career Opportunities' column:
URL
This should display #nolink
Navigation Label
About heading (this is not displayed - it's just for reference)
CSS Classes
The CSS Classes field should have the class - text
Description
The Description field can have any HTML. The following is what is in our demo site. Replace the # with a link to your own page.
You could upload your own image via the 'Media' section in WordPress and replace the path below with your own.
<a href="#"><img src="http://success.commercegurus.com/wp-content/uploads/2016/05/success_navigation_05.jpg" alt="" /></a>
<h4>Career Opportunities</h4>
<p>Work with leaders in your field to develop insight, experience and truly add value.</p>
3. The 'Who we are' column is the same as 'Career Opportunities' so if you can follow that step there's no need to repeat it. Instead, let's look at the last column - 'Get in touch'
URL
This should display #nolink
Navigation Label
About heading (this is not displayed - it's just for reference)
CSS Classes
The CSS Classes field should have the class - text
Description
The Description field can have any HTML. The following is what is in our demo site.
<h4>Get in Touch</h4>
<p class="with-icon">
<i class="ion-ios-location-outline"></i>
50 East 52nd Street. 21st Floor. Brooklyn, NY 10022, USA.</p>
<p class="with-icon">
<i class="ion-ios-telephone-outline"></i>
+1800 234 567<br/><small>Mon-Fri, 9am until 6pm</small></p>
<p class="with-icon">
<i class="ion-ios-email-outline"></i>
<a href="mailto:sales@example.com">sales@example.com</a><br/>
<small>We always reply within 24 hours</small></p>