How to Create a Mega Menu With Kadence Theme?

Kadence Theme Pro add-on allows you to create nice mega menus (multi column menus). In this post I’m going to show you how to do that.

Kadence theme

SAVE 10% COUPON: SIMPLEHACKS

What do you need to create a mega menu with Kadence theme?

There are some prerequisites that you need to be aware of.

Step 1: Install and activate Kadence Pro add-on

First of all, you need a Kadence Pro add-on which can be purchased here. If you already have it then go to Plugins >> Add new and install it.

Next, you need to activate the Ultimate menu add-on which adds menu options for mega menus, highlight tags, icons and more..Therefore, go to Appeareance >> Kadence and after activate it. See the screenshot.

How to Create a Mega Menu With Kadence Theme?

Step 2: Create a menu

Go to Appearance >> Menus >> Create a menu. Now add elements to the menu. Theses are only some lements you can add to the menu:

  • posts
  • pages
  • products
  • post categories
  • product categories
  • WooCommerce endpoints
  • custom links
  • etc

NB! After adding needed elements to the menu please save the menu. Otherwise, menu item settings, I will talk about in next step, will not be visible.

In order to have a nice mega menu create a menu structure with at least couple of three level menus.

Step 3: Open menu item settings and activate Mega menu

Open up a menu item and click on the Menu Item Settings button. See the screenshot This opens up additional menu settings. See the screenshot.

How to Create a Mega Menu With Kadence Theme?

Now the popup opens. Clock on the Mega settings link and activate mega menu dropdown. See the screenshot below.

As you see there are a lot of option to customize the look of your mega menu. Here are the most important settings:

  • mega menu columns (up to 6)
  • mega menu column layout
  • mega menu dropdown background color
  • links color
  • links background
  • links item divider color

Probably the most important settings are under Mega menu width dropdown. There you can choose between:

  • content width
  • menu container width
  • full width

In this tutorial I am going to create a three column menu. First two columns contain Woocommerce product categories and third one will contain a Free Shipping info box.

After choosing your settings press Save and close the window. Now save your menu and preview your site.

How to Create a Mega Menu With Kadence Theme?

Step 3: Customize mega menu headings (optional)

Currently, Kadence theme has no option for customizing mega menu column headings. For example, maybe you want them to stand out but there is no option to change the font size. Therefore, if you need to customize those column headings, go to Appearance >> Customizer >> Additional CSS and add this piece of code.

.header-menu-container ul.menu>li.kadence-menu-mega-enabled>ul>li>a {
    font-weight: 600; 
}

This is what we have accomplished so far. Two column mega menu with bold column headings. Now, lets add a custom element (for example, info box) inside the third column.

How to Create a Mega Menu With Kadence Theme Pro elements?
Mega menu with two columns and bold column headings

How to Create a Mega Menu With Kadence Theme Pro elements?

In this part of the tutorial we are going to use Kadence Blocks for Gutenberg plugin for creating an Info box element which will be shown inside third menu column. But before that you need the Hooked Elements add-on to be activated. If you haven’t done it so far go to Appearance >> Kadence.

You don’t have to use Gutenberg and instead use Elementor or Beaver Builder.

Step 1: Create a Kadence element

Go to Appearance >> Kadence >> Elements >> Add new. For an element type choose Default. Now create and cutomize this element you would like to show inside mega menu.

Next, open up Element settings >> Display settings and choose Entire site. See the screenshot below.

How to Create a Mega Menu With Kadence Theme Pro elements?

Step 2: Add element to your menu

After that publish you element and head over to Appearance >> Menus. Add a new item to the menu. It can be a custom link or already created page/post etc. Now save the menu and open up the menu settings of this item.

NB! You have to save the menu first, otherwise the menu settings for the added item are not visible.

Next, click on the Menu Item Settings button and head over to the Mega settings link. Enable Custom Content and choose the custom element you created earlier. See the screenshot.

How to Create a Mega Menu With Kadence Theme Pro elements?

Now save the menu and preview.

If everything is OK then your menu should like something like this here.

How to Create a Mega Menu With Kadence Theme Pro elements?

Video: How to Create a Mega Menu With Kadence Theme?

Useful Tips

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 106