Mega Menu

Premium Add-On users can create multiple, mobile responsive mega menu’s with Page Builder Framework.


Menu Structure

To create a mega menu, your menu structure under Appearance -> Menu in your wp-admin area would look something like this:

You can create up to 4 rows inside the mega menu. In our case Company, About, Shop & Legal work as the headlines for each section with the respective menu items below.


Declaring the mega menu

To declare the mega menu, 2 CSS classes need to be added to the top menu item. The first (wpbf-mega-menu) declares the menu as a mega menu while the second CSS class (in our case: wpbf-mega-menu-4) stands for the number of rows you want the mega-menu to have.

If you can’t find the CSS Classes (optional) input field, click on the Screen Options tab on the upper right on your screen to activate it. To build more complex mega menu’s, you may want to also check the Description checkbox but more on that later.


Headlines

To make menu items act and look like a headline, make sure you add a # in the URL field as seen on the image above. That way, the links aren’t clickable and inherit the themes default headline color.


Building more complex mega menu’s

You can use the Description field to build more complex mega-menu’s like this:

This is how our setup looks like in the backend:

Here is the code we are using in the Description field:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>

<img src="https://wp-pagebuilderframework.com/wp-content/uploads/og_image.jpg">

Design

To customize the look of your mega menu,  navigate to Header -> Submenu in the WordPress customizer.

Page Builder Framework

A Page Builder’s best friend.

Sign up for the Newsletter

Get notified about the latest features and updates.

Join the Community
Scroll to Top