You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
You are viewing the article in preview mode. It is not live at the moment.
Home > GrowthZone CMS Website > Creating a Mega Menu in GZCMS
Creating a Mega Menu in GZCMS
print icon

From the WordPress admin panel, click Appearance > Menus

 

Scroll down to your menu items and open the top-level menu item whose nested menu items you would like to turn into a mega menu. 


In the screenshot below, the target top-level item is Services. 

 

In the CSS Classes field, enter mega-menu, as shown in the screenshot. (If you don’t see this field, in the upper right corner, click Screen Options and make sure the CSS Classes checkbox is selected.) 

 

All of the menu items nested below the top-level item will be converted into a mega menu instead of a standard drop-down list. 
 

Note 

The mega menu is automatically disabled with the mega-menu-disabled class if the mega menu width exceeds that of the menu container. For full Bootstrap 4, the container width limit is 960px. 

 

To hide a mega menu column heading: 

  1. On the Appearance > Menus page, scroll down to a nested menu item whose heading you want to hide. 

  1. In the CSS Classes field, enter hide-heading. 

 

For more information and some CSS to make common adjustments, such as making it full-width, check out this blog post: 

https://davidwaumsley.com/beaver-builders-mega-menu-extended/ 

 

2017 Full-Width updated CSS: https://themer.beaverjunction.com/header-example-with-mega-menu  

 

This video walks through how to include descriptive text and images within the mega menu: https://www.youtube.com/watch?v=TqgVe8-gH_I 

 

This is a follow-up video by the same author talking about changes to the code in the blog post above: 
https://www.youtube.com/watch?v=zJWwDKfsBuI 

Feedback
0 out of 0 found this helpful

scroll to top icon