How to Create a Kadence Mega Menu (+Free Templates)

Want to make your website better and easier to use? Creating a mega menu with Kadence is a great start.

A well-organized mega menu helps your visitors find what they need fast. And with Kadence, it’s easy to create a good looking mega menu without slowing down your site.

Want to learn how? Keep reading.

In this Kadence mega menu tutorial, I’ll share:

• The exact steps to set up a mega menu with Kadence.
• Tips to make the most out of your mega menu.
• Five mega menu design examples from successful websites.
• Free templates that you can use on your website instantly.

Let’s make your website more user-friendly with a Kadence mega menu.

Steps to create a WordPress mega menu with Kadence

Follow these steps to set up a mega menu with Kadence Theme Pro.

1. Install Kadence Theme Pro and activate the Ultimate Menu and Hooked Elements addons

Go to Kadence’s website and select a plan, add your email address, billing address, payment information, agree to their terms and conditions, and click Place Order.

Also Read: Why Kadence Theme is the ultimate WordPress theme

Once you’re subscribed to Kadence Premium, log in to your account and select Download Files.

Depending on your Kadence premium subscription, you’ll see different plugins listed in your dashboard. For instance, here are the plugins I see as a Kadence Full Bundle user:

Find “Kadence Pro Plugin – Premium addon for the Kadence Theme”, select Download, and save the plugin file on your computer.

After that, log in to your WordPress admin account and go to Plugins > Add New.

Click Upload Plugin to open the plugin upload form, select Choose File, and upload the plugin zip file you just downloaded.

Click Install Now to install the Kadence Theme Pro plugin and then choose Activate Plugin to complete the installation.

Once the plugin activates, you’ll see a banner asking you to activate the Pro Kadence Theme license.

Select Click here to go to the Kadence theme dashboard, enter your License Key and License Email, and select Activate.

After you activate Kadence Theme Pro, go to Appearance > Kadence in your WordPress admin, enable Ultimate Menu and Hooked Elements.

2. Design your mega menu using the WordPress editor

Adding a mega menu with Kadence is a two-step process: first, you design the menu as a hooked element and then integrate it into your website navigation.

Let’s look at how to create a hooked element for the Kadence theme mega menu.

Go to Appearance > Kadence > Elements and select Add New.

Kadence lets you create four element types: content section, fixed section, template, and HTML editor. We’ll use a content section to create our mega menu.

Select Content Section, enter a title for your element, and design the mega menu. You can use any Kadence-compatible WordPress builder to design the mega menu.

I’m using Kadence Blocks because it’s super easy to use and my preferred block builder for all WordPress sites. Read my detailed Kadence Blocks review to learn why I think Kadence is the best WordPress block builder on the market.

The easiest way to design a multi-column mega menu is to add a Row Layout block and choose the number of columns you want.

Then select the Row Layout block, click the Inner Content Width icon and activate the Use Theme Content Inner Width? toggle.

Then design your mega menu using different Kadence blocks like Icon, Info Box, Image (Adv), and any other blocks relevant to your site.

To make it easier for you to follow along, I’ve created free templates that you can use for your website.

Click the link below to access my free Kadence mega menu templates design library.

Once you’ve designed your mega menu, set the Display Settings to Entire Site, User Settings to All Users, and click Publish.

3. Create and assign separate menus for desktop and mobile/tablet users

Mega menus are amazing for desktop users. But they rarely translate as well for mobile and tablet users. That’s why you should create two menus: one for desktop users and another for mobile and tablet users.

That way, no matter which device your visitors use, they’ll have the best website browsing experience possible.

To create a menu in WordPress, go to Appearance > Menus, and click create a new menu.

Name your menu, select a Display location, and click Create Menu.

You can assign the menu to display in four theme locations with Kadence:

1. Primary.
2. Secondary.
3. Mobile.
4. Footer.

If you’re creating the menu to use as the mega menu, set the Display location to Primary. Otherwise, set it to Mobile to use it for mobile and tablet devices.

Add Pages, Posts, Custom Links, and Categories to your new menu and click Save Menu to update your menu settings.

4. Configure Kadence Ultimate Menu to display your mega menu

Now, it’s time to set up your Kadence mega menu to display in your website navigation.

Go to Appearance > Menus and choose the Primary menu using the Select a menu to edit dropdown.

Expand the Custom Links section, type “#” in the URL field, set the Link Text to something like “Mega Menu”, and click Add to Menu.

Drag and drop the custom link item under the menu item for which you want to create a mega menu. For instance, I’ve nested it under an item called “Menu”.

Click Save Menu to update the menu.

At this point, Kadence will refresh the page and add the Menu Item Settings button to the sub menu item.

First, expand the parent menu item and click Menu Item Settings.

Choose the Label Settings tab and activate the Disable Link toggle.

Next, switch to the Mega Settings tab and configure the following settings:

1. Enable Mega Menu Dropdown: Activate the toggle.
2. Mega Menu Width: Set it to Content.
3. Mega Menu Columns: Set it to 1.
4. Dropdown Background: Set this to White or any other color of your choice.

Click Save and Close to update your settings.

Next, expand the nested menu item and select Menu Item Settings.

Open the Mega Settings tab, activate the Enable Custom Content toggle, choose your mega menu element from the Use a Custom Element dropdown, and click Save and Close.

Now click Save Menu to save your changes.

That’s it! Your Kadence theme mega menu should display correctly on your website after this.

5. Check if your menus display correctly on all devices

If you’ve followed everything correctly, your mega menu will work perfectly. Even so, it’s always best to verify everything’s up to spec.

Open your website in a web browser and open the mega menu. Hover your mouse over every link to make sure it points to the right page and nothing’s out of place.

Here’s how my Kadence mega menu appears on a desktop:

Next, verify the menu updates correctly for mobile and tablet devices. The easiest way to do that is to right-click inside your browser, select Inspect, and then use the Toggle device toolbar to mimic a mobile and tablet.

Here’s how my website menu updates once I switch over to a tablet view:

Important tips for adding a mega menu to your WordPress site

Adding a mega menu to your WordPress site is an excellent idea. But it can have some implications on your site’s SEO and user experience.

Here are some things you should keep in mind when you’re adding a mega menu to your site:

1. SEO considerations: A well-structured mega menu can help your website SEO. Organize it in a way that aligns with your site’s content hierarchy, using relevant keywords in menu titles and descriptions that help search engines understand and index your site more effectively.
2. Desktop vs. mobile mega menu: Even though your mega menu looks good on a desktop it might not translate well on a mobile device. So consider setting up a separate navigation that maintains readability for mobile and tablet users.
3. Loading speed: Although a Kadence mega menu won’t impact your website’s loading time, optimize any images in your mega menu to keep your site fast and snappy. A fast-loading site is important for a good user experience.
4. Navigational efficiency: Keep the user journey in mind. The goal of adding a mega menu is to lead visitors to your content with the fewest clicks. This efficiency not only enhances user experience but can also reduce bounce rates, which helps your SEO.
5. Accessibility: Make your mega menu accessible to all users, including those with disabilities. Use clear, legible fonts and ensure the menu is navigable via keyboard for users who cannot use a mouse.

5 effective mega menu design examples

Need some inspiration to design your website mega menu? Here are five mega menu examples to get your creative juices flowing.

1. Adidas

Adidas has multiple mega menu styles on their website but my favorite is the mega menu for 3 Stripe Life. It’s simple and provides access to multiple pages without coming across as busy or crowded.

Creating a similar design in Kadence is fairly easy. Start with a 6-column Row Layout and use the Image and Text (Adv) blocks to create your mega menu content.

2. Cloudways

Cloudways too implements a few different mega menu layouts in their website navigation. However, the one that caught my attention was the mega menu for their Products.

Cloudways’ mega menu lists their managed applications and cloud providers front and center. It also shows you three tools and services and includes a dedicated section for features and updates to grab your attention.

You can recreate this design in Kadence blocks using a three-column Row Layout, Info Box, Text (Adv), and Image block.

3. KadenceWP

Kadence does a good job of creating a simple mega menu layout for their Products menu. They organize six of their top products into two columns and include a View all products link to show visitors everything else they offer.

You can recreate Kadence’s mega menu layout using the Info Box and Text (Adv) blocks. Now, because this design is fairly simple, I’d suggest using custom icons to elevate your design and make it stand out.

4. Shopify

Shopify has multiple mega menu styles on their site. The biggest layout is the Solutions menu which links to different landing pages for potential customers.

Recreating Shopify’s mega menu style is a little more tricky but doable. You’ll need two row layouts: one for the narrow section at the bottom and one for the main mega menu content. Set both to four-columns and add your content using Text (Adv) and Info Box blocks.

5. Siteground

Siteground uses a modern and minimalist mega menu layout on its website that uses a media + text combination to help visitors navigate across their site. It’s clean, simple, and easy to implement.

Just add a Row Layout, select the number of columns you want, add an Info Box block in each column, and then tweak the styling of each block to recreate it.

Final thoughts: Setting up a mega menu is easy with Kadence

There you have it! I’ve explained how to create and implement a mega menu with Kadence, shared important tips for designing mega menus, and showed you 5 real-world mega menu examples to inspire you.

Here’s a quick recap of some of the most important takeaways of this Kadence mega menu tutorial:

• A mega menu is a big menu that helps people find things easily on your site.
• If you build it right, a mega menu won’t hurt your website’s SEO. It can even make your site more user-friendly.
• It’s best to use mega menus for desktop devices only. Create a separate menu for tablets and mobile devices.

Ready to make your website better with a Kadence mega menu? Grab my free Kadence mega menu templates for your website.

If you have questions about this Kadence mega menu tutorial, get in touch with me. I’m here to help 🙂

FAQs about adding a mega menu to WordPress websites