Mega menu is a popular navigation option for WordPress websites or other websites with complex content structures. They provide a visually appealing way to display a large number of menu items and submenus in a dropdown format. WordPress Mega Menu is a powerful tool that can help you manage and organize your website’s navigation. It is a great way to make your website more user-friendly and to help visitors quickly find the content they are looking for. You can create a WordPress mega menu with and without a plugin for your website like Elementor or Max Mega Menu.
It has happened to you many times that you see some beautiful columns with sliders or banners on a website menu and tell yourself how these menus are created. This menu is called the mega menu, and in WordPress, we can create these types of menus in two ways, using the plugin and without the plugin by using PHP code and menu shortcode.
In this tutorial, we will explain how to implement the mega menu using a plugin without using a plugin, and with coding.
When is the mega menu used?
Mega menus are very useful for the user experience, especially if the website is thematically broad, such as stores with many products with many categories. Also, mega menus allow us to display pages or products with lower categories for the user to find them easily.
If you have a limited number of navigation menus on your WordPress website, you probably don’t need a mega menu. But if the number of these menus is more, your navigation menu will start to get messy. At this time, you will need Mega Menu to create and manage your navigation menu on your WordPress website, so that your menu is not messy and it is easy for your users to find categories.
If you have a store website, we recommend you use a mega menu because over time your number of menus will be more than what you have now. Also, finding low-category products is especially important for your users, which will be done easily with the WordPress Mega Menu.
Create a mega menu in WordPress using a plugin
To create and implement the mega menu in WordPress, there are plugins available in WordPress that are offered for free and paid. Just search for them in WordPress and install them.
1. Max Mega Menu
One of the popular plugins for creating and implementing the mega menu in WordPress is the Max Mega Menu plugin. This plugin provides an easy way to create a responsive mega menu in WordPress. This plugin automatically turns your website menu into a mega menu. Using this plugin, you can easily create a multi-column mega menu, add WordPress widgets to your menu, and add your own shortcodes.
If you want to add shortcodes to your menu without using a plugin, we have provided you with a complete tutorial.
2. UberMenu
UberMenu plugin is another popular choice among WordPress users. This plugin has features such as being responsive, supporting flyout menus, and personalizing the menu as much as possible. With this plugin, you can even set the direction of the menus.
3. ElementsKit
If you have worked with the Elementor page builder plugin, you are also familiar with the ElementsKit plugin or you have heard its name. This plugin provides features such as a header, footer, logo widget for the website, and many other features that you can easily use for website design.
The ElementsKit plugin has a mega menu, using which you can easily create and design a mega menu for your WordPress website without interrupting your website design. This plugin is responsive and supports the mobile menu.
4. WP Mega Menu
If you’re looking for a free, quality WordPress mega menu option, try the WP Mega Menu plugin from Themeum. This plugin includes functions that are usually only found in paid options.
This plugin provides users with a user-friendly interface by using drag and drop and access to Google fonts.
5. Superfly
Fly menus are menus that when the user clicks on the menu icon (such as a hamburger button), the menu enters the page from the side and displays the menu items for the user. Fly menus are especially useful on mobile screens where space is limited but good navigation is crucial, and the Superfly plugin allows you to easily add such a menu to your WordPress site.
6. Mega Main Menu
The Mega Main Menu plugin is a simple but effective tool for putting a mega menu in WordPress, which provides you with everything you need for a menu. It has more than 10 layout options for dropdown menus and you can place links, images, and widgets inside them. It also offers unlimited color options, over 1,600 vector icons, sticky menu settings (meaning the menu stays on the screen as users move), and access to Google fonts.
7. Hero Menu
Another quality premium option, Hero Menu has one of the best UI builders. You can adjust the menu items by dragging and dropping.
The plugin also offers several menu styles to choose from and 60 preset color combinations to save you time. The menus are responsive and WooCommerce-friendly.
8. WP Mega Menu Pro
WP Mega Menu Pro plugin allows you to choose from 10 templates and 14 beautifully designed menu skins when designing your menus. Menus in this plugin can be created in both horizontal and vertical directions. An additional benefit of this simple plugin is the ability to limit the visibility of menu items based on the user’s role.
9. Sky Mega Menu
The Sky Mega Menu plugin is an inexpensive way to create a simple but professional menu for your WordPress website. It has three responsive layouts, 9 different color schemes, and a library of 361 icons. You can also make your menus fixed or sticky and add input forms for search, login, and registration.
10. Menu Management Enhancer
Slick Menu plugin is a WordPress mega menu plugin that adds a sleek vertical navigation menu to your site. This menu is fully responsive so that your visitors can find the content they need.
WordPress mega menu programmatically without plugins
In this section, we are going to discuss how to create a mega menu using coding in WordPress (without a plugin). This tutorial will consist of two parts. One will be without changes in the menu and walker codes, and the other will be using changes in the menus and walker codes.
Many beautiful mega menus have a general problem and that is not responsive. Don’t get me wrong, almost all mega menus are responsive, but the menu looks better on desktop than on mobile. To maximize the user experience in WordPress, you can separate the desktop and mobile menus. For this, we have prepared an article titled menu development in WordPress.
Creating a mega menu without using a WordPress walker
In this section, we assume that the navigation menu is already created and exists. We want to design some of these menu items as a mega menu. These menus must have submenus. If they don’t have a submenus, create some submenus.
Mega Menu has menus that have several columns under which each column has a title for the column. You can even add images to some of these columns.
Go to your theme’s functions.php file and enter the following code in the appropriate field. If this code already exists, skip adding it.
if (!function_exists('hs_sample_setup_header')) :
function hs_sample_setup_header()
{
register_nav_menus(
array(
'main-menu' => esc_html__('Main Menu', 'textdomain'), )
);
}
add_action('after_setup_theme', 'hs_sample_setup_header');
endif;Go to your theme’s header.php file and enter the following code in the appropriate field. If this code already exists, skip adding it.
<?php if (has_nav_menu('main-menu')) : ?>
<nav class="navbar">
<div id="bscollapse" class="navbar-box">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => 'div',
'menu_class' => 'nav navbar-nav',
));
?>
</div>
</nav>
<?php endif; ?>Go to the Menus section in the WordPress dashboard and create your menu. Add as many sub-menus as needed to your menu. Your menu should look something like the image below.
Open the menu item that you want to turn into a mega menu, and in the CSS Classes section, enter the word has-mega-menu as shown in the image below.
If you don’t see the CSS Classes section, click Screen Options from the top of the page and tick CSS Classes.
Now go to the menu item that you want to define as a column and enter mega-menu-column in its class as shown in the image below.
Now our menu is ready in the dashboard part, but we have not entered its styles yet. To define styles, open your theme’s style.css file and add the following codes to it.
nav .sub-menu .mega-menu-column .sub-menu{
position: relative;
display: block;
}
.has-mega-menu {
position: static;
}
li.has-mega-menu .sub-menu {
width: 100%;
position: absolute;
top: NNpx;
z-index: 100;
left: 0px;
right: 0px;
}
li.has-mega-menu > .sub-menu{
box-shadow: #3C4048 2px 2px 10px -4px;
background: #fff;
}
li.has-mega-menu:hover>.sub-menu {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
visibility: visible;
opacity: 1;
}
li.has-mega-menu .mega-menu-column > a{
background: #00ABB3;
color: #fff;
}
@media screen and (min-width: 992px) {
li.has-mega-menu:hover>.sub-menu {
grid-template-columns: repeat(auto-fit, minmax(33.3333%, 1fr));
}
}
@media screen and (min-width: 1200px) {
li.has-mega-menu:hover>.sub-menu {
grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}
}
@media screen and (min-width: 600px) {
li.mega-menu-column {
width: 100%;
max-width: 100%;
min-height: 1px;
padding: 10px 25px;
flex: 1 0 calc(50%);
}
}
@media screen and (min-width: 992px) {
li.mega-menu-column {
flex: 1 0 calc(33.333%);
}
}
@media screen and (min-width: 1200px) {
li.mega-menu-column {
flex: 1 0 calc(25%);
}
}If you go to your WordPress website and go to the menu, you will see that your menu has turned into a mega menu.
Now, if we want to add a photo to our menu, just open the desired menu item in the dashboard and add the photo to the menu item.
In the title field of the menu item, just enter the HTML code of the photo as below.
<img src="https://yourwebsite.com/wp-content/uploads/2022/11/Logo.png" />
Now go to your website page. If you move your mouse over the menus, you will see that the menu will be as follows.
Although this method is simple and can be implemented on all WordPress themes, it has its own disadvantages. Among these disadvantages is that it has a simple design and its structure is still a simple WordPress menu. For example, you cannot design submenus using page builders or add shortcodes to menus.
To add a shortcode to the navigation menu, we have provided a method with the same name on this website, but it is still a simple mega menu.
Let’s create a professional mega menu for your WordPress theme.
How To Add a Mega Menu in WordPress with Elementor and JetMenu Plugin
Elementor is a popular drag-and-drop page builder that most modern WordPress themes support today. Although this WordPress plugin has many features, to create a mega menu, we need to use another plugin called JetMenu. Of course, there are other plugins for this, but the JetMenu plugin makes it easier and has easy and user-friendly settings.
Go to Appearance → Menus and create your menu as above. If you have installed and activated the JetMenu plugin, you will notice that the plugin option is enabled in the menu. To design a mega menu in WordPress with Elementor and JetMenu plugin, activate this option and click on the JetMenu menu item.
In the opened window, activate the Mega submenu enabled option. In fact, this is the only setting you make, but there are other options for more settings.
Next, click the Edit Mega Menu Item Content button to launch the Elementor interface. The interface will open in a popup, but it’s the same regular Elementor interface other than that.
Now you can design your mega menu using Elementor in WordPress specify the location of the items and then save the designed page to apply the changes.
