Mega Menu

Since 1.0.5 you can easily create customizable mega-menus inside the WP 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 are working as the headlines for each section with the respective menu items below.

Declaring the mega menu

To get the mega menu working on the front end of your website, the only thing you need to to is to add 2 CSS classes 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 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. You will find more information on that below.

Headlines

To make menu items act and look like a headline, make sure you add a hashtag (#) 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 a more complex mega menu

To build more complex header mega-menu’s, you need to activate the “Description” checkbox under the Screen Options. You can add text or even HTML to the desciption textarea. In our example we are adding a text + image to the shop column:

This is how our setup looks like in the backend:

And that 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">

To style the mega menu to match the design of your website, open the WordPress customizer and navigate to “Header -> Submenu”.