Why Use a Dynamic Mega Menu in WordPress?
If you've ever wanted to create a dynamic mega menu in WordPress using only free plugins, you're in the right place. In this tutorial, we'll build a highly interactive mega menu that changes based on user interactions. When users hover over any parent menu item, the child items will dynamically change in the next columns, creating a fluid and engaging user experience.
In this guide, I’ll show you step-by-step how to achieve this without needing Elementor Pro or any paid plugins. Let's dive in!
What We’ll Achieve:
Imagine having a mega menu where, when users hover over the first column's parent items, the next three columns update to show the respective child items dynamically. For example, hover over "Menswear" and see all relevant child items like T-shirts, Jackets, and Shoes. Move to "Womenswear," and the child items instantly update with Dresses, Skirts, and more. Sounds fun, right?
Let’s Get Started:
Best Plugins for Creating a Mega Menu
We’ll be using the Astra Theme in this tutorial, but don’t worry—this method works with any theme. Here’s what you need:
- Elementor – Our page builder.
- Elements Kit Lite – The plugin that helps us create the mega menu.
- WPCode – To add custom code for dynamic functionality.
Step-by-Step: Create Website in 5 Minutes with Elementor
Step 1: Choose the Right Mega Menu Plugin
Install and Activate the Plugin
First, head over to your WordPress dashboard and install these plugins:
- Elementor (Free) – Go to Plugins > Add New, search "Elementor," install, and activate it.
- Elements Kit Lite – Again, search for it in the plugin directory, install, and activate.
- WPCode – This plugin helps us add custom code easily. Search, install, and activate it.
Step 2: Set Up the Basic Menu
Now, let’s prepare a basic dropdown menu so we can convert it into a mega menu later:
- Go to: Dashboard > Appearance > Menus.
- Create a Primary Menu: If you don't already have a menu, create a new one named "Primary."
- Add Menu Items: For demonstration, I’ll use “Services” as a parent item. Add custom links for the sub-items like Service 1, Service 2, and Service 3. Organize them as sub-items under "Services" to create a dropdown.
- Save Menu and preview your site to ensure that when you hover over “Services,” a basic dropdown appears.
Step 3: Create a Custom Header for Mega Menu
Mega menus only work with custom headers, so let’s create one:
- Go to Elements Kit > Header Footer in your dashboard.
- Click Add New, name your header, and set the condition to “Entire Site.” Enable it and click Edit Content to open the Elementor editor.
- Use a Template: Instead of building from scratch, click Elements Kit Templates, choose Header, and insert the one that suits your design.
- Customize your header: Add your logo, change the color scheme, and ensure that the Elements Kit Nav is selected for the menu. If it's not, delete the default menu and drag Elements Kit Nav into the appropriate column, selecting the “Primary” menu.
- Save and preview your site. You should see the custom header with your dropdown menu.
Step 4: Enable Mega Menu
Now, let’s transform our dropdown into a dynamic mega menu:
- Go back to the Menus section in WordPress.
- Enable Mega Menu for Elements Kit by checking the option under menu settings.
- Now, hover over the parent item (like "Services") and click on Mega Menu. This will open a new window where you can enable it and adjust the width (e.g., set to 1000px).
Step 5: Building the Dynamic Mega Menu Template
Here’s where the fun begins—designing the dynamic part of the mega menu!
- Click Edit with Elementor in the mega menu pop-up to open the editor.
- Create a 4-Column Layout: Insert a section and set it to 4 columns.
- The first column will display the parent items (like Menswear, Womenswear, Kidswear).
- The next three columns will display child items, which change dynamically based on which parent is hovered over.
Step 6: Adding Custom HTML and CSS for Interactivity
Now we’ll use custom HTML and CSS to make the mega menu dynamic:
- First Column (Parent Items): In the first column, add an HTML widget and paste this code:
<div class="mega-menu">
<!-- First Column: Parent Submenu Items -->
<div class="column parent-column">
<div class="parent-item parent-item-menswear" data-target="child-menswear">
<span class="parent-icon">
👕 <!-- Man's Clothing symbol -->
</span>
Menswear
</div>
<div class="parent-item parent-item-womenswear" data-target="child-womenswear">
<span class="parent-icon">
👖 <!-- Woman's Clothing symbol -->
</span>
Womenswear
</div>
<div class="parent-item parent-item-kidswear" data-target="child-kidswear">
<span class="parent-icon">
👫 <!-- Child symbol -->
</span>
Kid's Wear
</div>
</div>
</div>
This creates three parent items. When hovered, we want the child items in the other columns to update.
- Second Columns(Child Items):
- In the second column, add this HTML to show the child items for "Menswear":
<div class="mega-menu">
<!-- Second Column: Child Items for Parents -->
<div class="column child-column child-column-1">
<!-- Menswear Child Items -->
<div class="child-item child-menswear">
<span class="child-icon">👕</span> <!-- Man's Clothing symbol -->
Men's T-Shirts
</div>
<div class="child-item child-menswear">
<span class="child-icon">👗</span> <!-- Jeans symbol -->
Men's Jeans
</div>
<div class="child-item child-menswear">
<span class="child-icon">👛</span> <!-- Jacket symbol -->
Men's Jackets
</div>
<div class="child-item child-menswear">
<span class="child-icon">👜</span> <!-- Suit symbol -->
Men's Suits
</div>
<div class="child-item child-menswear">
<span class="child-icon">👟</span> <!-- Shoes symbol -->
Men's Shoes
</div><!-- Womenswear Child Items (Initially Hidden) -->
<div class="child-item child-womenswear">
<span class="child-icon">👘</span> <!-- Dress symbol -->
Women's Dresses
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👛</span> <!-- Top symbol -->
Women's Tops
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👘</span> <!-- Skirt symbol -->
Women's Skirts
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👜</span> <!-- Outerwear symbol -->
Women's Outerwear
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👟</span> <!-- Shoes symbol -->
Women's Shoes
</div>
<!-- Kidswear Child Items (Initially Hidden) -->
<div class="child-item child-kidswear">
<span class="child-icon">👫</span> <!-- Child symbol -->
Kids' T-Shirts
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👛</span> <!-- Pants symbol -->
Kids' Pants
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👛</span> <!-- Jacket symbol -->
Kids' Jackets
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👗</span> <!-- Dress symbol -->
Kids' Dresses
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👟</span> <!-- Shoes symbol -->
Kids' Shoes
</div>
</div>
</div>
- Third Column (Child Items):
- In the Third column, add this HTML to show the child items for "Menswear":
- Third Column (Child Items):
<div class="mega-menu">
<!-- Third Column: Child Items for Parents -->
<div class="column child-column child-column-2">
<!-- Menswear Child Items -->
<div class="child-item child-menswear">
<span class="child-icon">👕</span> <!-- Man's Clothing symbol -->
Men's Shorts
</div>
<div class="child-item child-menswear">
<span class="child-icon">👖</span> <!-- Sweater symbol -->
Men's Sweaters
</div>
<div class="child-item child-menswear">
<span class="child-icon">👛</span> <!-- Shirt symbol -->
Men's Shirts
</div>
<div class="child-item child-menswear">
<span class="child-icon">👜</span> <!-- Coat symbol -->
Men's Coats
</div>
<div class="child-item child-menswear">
<span class="child-icon">👚</span> <!-- Accessories symbol -->
Men's Accessories
</div><!-- Womenswear Child Items (Initially Hidden) -->
<div class="child-item child-womenswear">
<span class="child-icon">👕</span> <!-- Blouse symbol -->
Women's Blouses
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👛</span> <!-- Pants symbol -->
Women's Pants
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👕</span> <!-- Cardigan symbol -->
Women's Cardigans
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👜</span> <!-- Jacket symbol -->
Women's Jackets
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👟</span> <!-- Handbag symbol -->
Women's Handbags
</div>
<!-- Kidswear Child Items (Initially Hidden) -->
<div class="child-item child-kidswear">
<span class="child-icon">👫</span> <!-- Sweater symbol -->
Kids' Sweaters
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👝</span> <!-- Outerwear symbol -->
Kids' Outerwear
</div>
<div class="child-item child-kidswear">
<span class="child-icon">🌞</span> <!-- Swimwear symbol -->
Kids' Swimwear
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👟</span> <!-- Boots symbol -->
Kids' Boots
</div>
<div class="child-item child-kidswear">
<span class="child-icon">🍪</span> <!-- Hat symbol -->
Kids' Hats
</div>
</div>
</div>
- 4th Coulmn (Child Items):
- In the fourth column, add this HTML to show the child items for "Menswear":
<div class="mega-menu">
<!-- Fourth Column: Child Items for Parents -->
<div class="column child-column child-column-3">
<!-- Menswear Child Items -->
<div class="child-item child-menswear">
<span class="child-icon">👜</span> <!-- Suit symbol -->
Men's Suits
</div>
<div class="child-item child-menswear">
<span class="child-icon">👕</span> <!-- Shirt symbol -->
Men's Dress Shirts
</div>
<div class="child-item child-menswear">
<span class="child-icon">👖</span> <!-- Belt symbol -->
Men's Belts
</div>
<div class="child-item child-menswear">
<span class="child-icon">👟</span> <!-- Socks symbol -->
Men's Socks
</div>
<div class="child-item child-menswear">
<span class="child-icon">👐</span> <!-- Sunglasses symbol -->
Men's Sunglasses
</div><!-- Womenswear Child Items (Initially Hidden) -->
<div class="child-item child-womenswear">
<span class="child-icon">💎</span> <!-- Jewelry symbol -->
Women's Jewelry
</div>
<div class="child-item child-womenswear">
<span class="child-icon">🍗</span> <!-- Scarf symbol -->
Women's Scarves
</div>
<div class="child-item child-womenswear">
<span class="child-icon">🤻</span> <!-- Gloves symbol -->
Women's Gloves
</div>
<div class="child-item child-womenswear">
<span class="child-icon">🎁</span> <!-- Hat symbol -->
Women's Hats
</div>
<div class="child-item child-womenswear">
<span class="child-icon">👐</span> <!-- Sunglasses symbol -->
Women's Sunglasses
</div>
<!-- Kidswear Child Items (Initially Hidden) -->
<div class="child-item child-kidswear">
<span class="child-icon">🎁</span> <!-- Hat symbol -->
Kids' Hats
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👐</span> <!-- Sunglasses symbol -->
Kids' Sunglasses
</div>
<div class="child-item child-kidswear">
<span class="child-icon">🤻</span> <!-- Gloves symbol -->
Kids' Gloves
</div>
<div class="child-item child-kidswear">
<span class="child-icon">💼</span> <!-- Bag symbol -->
Kids' Bags
</div>
<div class="child-item child-kidswear">
<span class="child-icon">👞</span> <!-- Belt symbol -->
Kids' Belts
</div>
</div>
</div>
- CSS for Interactivity:
Now, we need to hide child items by default and only show them when the corresponding parent item is hovered. Add this CSS in Appearance > Customize > Additional CSS:
/* General Mega Menu Styling */
.mega-menu {
display: flex;
justify-content: space-between;
background-color: #f8f9fa; /* Soft background color for the menu */
padding: 20px;
border-radius: 8px; /* Rounded corners for a modern look */
border: 1px solid #e0e0e0; /* Light border color */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
max-width: 1200px;
margin: 0 auto;
position: relative; /* For positioning child elements */
overflow: hidden; /* To keep rounded corners effect */
}/* Styling for the Columns */
.column {
flex: 1; /* Equal width for each column */
padding: 0 20px;
position: relative; /* For positioning child elements */
}
/* Styling for Parent Items */
.parent-item {
font-size: 18px;
font-weight: 600;
color: #333; /* Text color for parent items */
cursor: pointer;
margin-bottom: 20px;
display: flex;
align-items: center;
transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}
.parent-item:hover {
color: #007bff; /* Change color on hover */
transform: translateY(-2px); /* Subtle lift effect */
}
/* Icon Styling for Parent Items */
.parent-icon {
font-size: 20px; /* Adjust icon size */
color: #007bff; /* Icon color */
margin-right: 15px;
transition: color 0.3s ease; /* Smooth color transition */
}
/* Initially hide all child items */
.child-item {
display: none;
}
.parent-item:hover .parent-icon {
color: #0056b3; /* Darker color on hover */
}
/* Styling for Child Items */
.child-item {
font-size: 16px;
color: #555; /* Text color for child items */
padding: 8px 0;
cursor: pointer;
transition: color 0.3s ease, padding-left 0.3s ease; /* Smooth transitions */
}
.child-item:hover {
color: #007bff; /* Change color on hover */
padding-left: 10px; /* Slight indentation on hover */
}
/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
.mega-menu {
flex-direction: column; /* Stack columns on top of each other */
padding: 15px;
box-shadow: none; /* Remove shadow for mobile view */
}
.column {
padding: 10px 0;
}
}
Step 7: Adding JavaScript for Dynamic Functionality
To make the columns interact, add this JavaScript in the WPCode plugin:
jQuery(document).ready(function($) {
// Initially hide all child items
$('.child-item').hide();// Show child items of the first parent by default
var firstParentTarget = $('.parent-item').first().data('target');
$('.' + firstParentTarget).show();
// Hover functionality
$('.parent-item').hover(function() {
var targetClass = $(this).data('target');
$('.child-item').hide();
$('.' + targetClass).show();
});
});
Step 8: Final Preview and Tweaks
Save everything and check the live preview of your mega menu. Hover over "Menswear," "Womenswear," and "Kidswear," and watch as the child items dynamically update in the other columns!
That’s it! You’ve built a fully functional, dynamic mega menu using only free tools. Enjoy customizing it further to fit your design. If you need the full code, check the link below for a downloadable template.
Let me know in the comments if you faced any issues or have suggestions for future tutorials!
Here is the link to Mega Menu using Elementor
Here is the link to Elements Kit Lite : Elements kit Lite