![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook_-Build-website-in-9-steps_in-text-banner-1-1024x283.png\")
<\/a><\/figure>\n\n\n\n
What Is a WordPress Mega Menu?<\/h2>\n
A WordPress mega menu lets website owners add multiple columns, rich media content, and customized styling. Compared to traditional menus, mega menus make navigating through complex websites easier. Visitors can find the information they need quickly and efficiently.<\/p>\n <\/div>\n\n\n\n<\/p>
A WordPress mega menu usually consists of several levels:<\/p>
- \n
- Top-level menu<\/strong>. This is the primary menu visitors see upon landing on a website. A top-level menu typically contains the main categories or sections of a website, such as a Products <\/strong>page.<\/li>\n\n\n\n
- Second-level menu<\/strong>. It will be visible when users hover or click a top-level menu item. For instance, fashion brands usually list Clothing <\/strong>as one of the second-level items in the Products section.<\/li>\n\n\n\n
- Third-level menu<\/strong>. These sub-menus appear when visitors interact with a second-level menu. For example, the third-level items for Clothing <\/strong>can be Shirts<\/strong>, Sweaters<\/strong>, and Jackets<\/strong>.<\/li>\n<\/ul>
While it’s possible to create more sub-menu levels, stick with three to avoid overwhelming visitors.<\/p>
How to Create a Mega Menu in WordPress<\/h2>
The easiest way to create a mega menu in WordPress is by using a plugin. If you possess some level of technical knowledge, it’s also possible to add a mega menu manually using custom CSS<\/a> code.<\/p>
This section will cover both options in more detail. Feel free to jump straight into your preferred method.<\/p>
How to Create a WordPress Mega Menu Using the Max Mega Menu Plugin<\/h3>
Max Mega Menu<\/a> is a complete menu management plugin that supports multiple menu locations. This flexibility lets you customize mega menu settings for different sections of your site.<\/p>
Before we dive deeper into how Max Mega Menu works, install and configure the plugin first.<\/p>
1. Configure the Max Mega Menu Plugin<\/strong><\/p>
To install a WordPress plugin<\/a>, log in to your WordPress dashboard and head to Plugins → Add New<\/strong>. Enter Max Mega Menu<\/strong> in the search bar, then click Install Now<\/strong> and Activate <\/strong>once you’ve found the plugin.<\/p>
\nPro Tip<\/h4>\n
Before proceeding, publish all important pages and create a custom navigation menu. After that, make sure to add those pages to your menu items in WordPress<\/a>.<\/p>\n <\/div>\n\n\n\n<\/p>
Next, access Mega Menu<\/strong> from the left sidebar to configure its default settings. For example, if you want to add a menu location, follow these steps:<\/p>
- \n
- Go to Appearance <\/strong>→ Menus<\/strong>.<\/li>\n\n\n\n
- Select Menu Locations <\/strong>and click Add another menu location<\/strong>.<\/li>\n\n\n\n
- Enter the website section where you want to display the menu, such as the header, footer, or sidebar.<\/li>\n\n\n\n
- Select the custom menu you have created.<\/li>\n\n\n\n
- Click Add menu location<\/strong>.<\/li>\n<\/ol>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-17.png\")
<\/figure>Once created, tick the Enabled <\/strong>box under General Settings<\/strong>. Next to Event<\/strong>, choose from the three main options to trigger the menu:<\/p>
- \n
- Hover Intent<\/strong>. Users need to hover over the top-level menu for a few seconds before its second-level menu appears. This delay is designed to prevent accidental clicks.<\/li>\n\n\n\n
- Hover<\/strong>. Sub-menus will open instantly when a user hovers their mouse pointer over the parent menu. Since there’s no delay, this method works best for delivering a smooth navigation system.<\/li>\n\n\n\n
- Click<\/strong>. It requires visitors to click or tap the mega menu to open its second-level items. This option is ideal for touchscreen devices and situations where precise mouse hovering might be challenging.<\/li>\n<\/ul>
If you select Click<\/strong>, head to the Advanced <\/strong>tab → Click Event Behaviour<\/strong>. Then, choose one of these options to determine what will happen when users click the mega menu:<\/p>
- \n
- The first click will open the sub-menu, and the second click will close it.<\/li>\n\n\n\n
- The first click will open the second-level menu, and the next click will follow the page link.<\/li>\n\n\n\n
- The first click will directly open the page link.<\/li>\n<\/ul>
![\"Max](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-8.png\")
<\/figure>Afterward, go back to the General Settings<\/strong> tab and locate the Effect <\/strong>area.<\/p>
Here, select an animation type for your mega menu, including fade, fade up, slide, and slide up. You can also set the animation speed to fast, medium, or slow.<\/p>
To enable animation for your mobile menu, choose a style next to Effect (Mobile)<\/strong> – slide down, slide left, or slide right. Note that using an interactive element may slow down your site on mobile devices or systems with slow internet speeds.<\/p>
Once you’re satisfied with the configuration settings, click Save Changes<\/strong>.<\/p>
![\"Max](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-13.png\")
<\/figure>2. Set Up the Menu Layout and Appearance<\/strong><\/p>
Max Mega Menu offers a default menu theme you can use right away. But if you prefer creating a custom theme, you can personalize your mega menu easily.<\/p>
To do so, access Menu Themes<\/strong> from the Max Mega Menu settings. Click the three-dot icon<\/strong> next to Select theme to edit<\/strong>, and choose Add new theme<\/strong>.<\/p>
Under General Settings<\/strong>, you can change the new theme’s title, select an arrow style, set the general line height for sub-menu items, and apply a shadow to your mega menu layouts.<\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-9.png\")
<\/figure>Next, open the Menu Bar<\/strong> tab to personalize your top-level menu. This will determine how visitors see your navigation menu on its minimized view.<\/p>
The upper side of this tab offers settings to adjust the menu’s height and background color. You can also set a custom padding to achieve the desired layout and add borders around menu items for visual distinction.<\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-12.png\")
<\/figure>Upon scrolling down, there’s also a dedicated section for customizing your top-level menu items:<\/p>
- \n
- Menu Items Align<\/strong>. Place all menu items to the left, center, or top right of your website.<\/li>\n\n\n\n
- Item Font<\/strong>. Customize the menu typography to match your site design, including the font family, size, weight, color, and visual styling options.<\/li>\n\n\n\n
- Item Background<\/strong>. Change the background color of each menu item. Leave it transparent if you’ve already set the Menu Background<\/strong>.<\/li>\n\n\n\n
- Item Spacing<\/strong>. Adjust the margin and padding around each item to fine-tune your mega menu layout.<\/li>\n\n\n\n
- Item Border<\/strong>. Define the border’s color, menu width, and radius to create different visual effects.<\/li>\n\n\n\n
- Highlight Current Item<\/strong>. When enabled, the current menu item will be highlighted when users hover over it, making navigation more intuitive.<\/li>\n<\/ul>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-14.png\")
<\/figure>After your top menu is set, move on to the Mega Menu<\/strong> section. In this tab, you can change the font, background color, spacing, and border of your second-level and third-level items.<\/p>
To create a distinct look, make sure to assign different color schemes to the parent menu and sub-menus. However, we recommend using the same typography to ensure consistency.<\/p>
Once done, don’t forget to save your changes.<\/p>
3. Add Content to the WordPress Menu<\/strong><\/p>
Max Mega Menu offers a drag-and-drop interface, making it easy to add new content. Apart from text links, you can also add WooCommerce products, images, and search filters.<\/p>
\nPro Tip<\/h4>\n
To add products to your WordPress site and start selling online, read this comprehensive WooCommerce tutorial<\/a>.<\/p>\n <\/div>\n\n\n\n<\/p>
Start by navigating to Appearance <\/strong>→ Menus<\/strong> to create a new menu or edit your existing one. Then, follow these instructions:<\/p>
- \n
- Tick the Enable <\/strong>box from the Max Mega Menu Settings<\/strong> on the left. This box also allows you to configure the menu settings for multiple locations.<\/li>\n\n\n\n
- Move down to Pages<\/strong>, select all pages, and click Add to Menu<\/strong>.<\/li>\n\n\n\n
- Repeat the same process for Posts<\/strong>, Categories<\/strong>, and Product Categories<\/strong>.<\/li>\n\n\n\n
- Under Menu Structure<\/strong>, drag and drop the sub-categories to their respective main category. You can create a third-level menu by dragging it to the right side of a second-level menu and so on.<\/li>\n<\/ol>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-18.png\")
<\/figure>By default, this plugin uses a flyout or dropdown menu style. To create a mega menu, hover over one of your pages and click the Mega Menu <\/strong>button.<\/p>
When a pop-up appears, set the sub-menu display mode to either Grid Layout<\/strong> or Standard Layout<\/strong>.<\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-10.png\")
<\/figure>The mega menu grid layout lets you create a menu in multiple columns and rows. Meanwhile, you can only change the number of columns when using the standard layout.<\/p>
Add rich content to make your menu more visually appealing by clicking Select a widget to add to the panel<\/strong>. Then, choose a widget from the dropdown list, including a search bar, image gallery, calendar, audio content, video, and product filters.<\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-16.png\")
<\/figure>If your site has a complex menu with many links, assign an icon to each item to boost the user experience. Simply navigate to Icons <\/strong>on the left sidebar and select icons from various platforms.<\/p>
Close the Mega Menu<\/strong> pop-up and repeat the process for each top-level page. After configuring all the settings, click Save Menu<\/strong> to enable the mega menu on your site.<\/p>
How to Create a WordPress Mega Menu Manually Using Code<\/h3>
Creating a WordPress mega menu manually using code gives you more control over its design and functionality. However, this method requires custom CSS knowledge and the ability to tweak your theme’s stylesheet file.<\/p>
Follow this step-by-step guide to add a mega menu to your WordPress site:<\/p>
1. Prepare Your Development Environment<\/strong><\/p>
WordPress is<\/a> an open-source content management system (CMS), which means you can use custom code to tweak its themes and plugins.<\/p>
However, editing code on your live website can lead to unexpected issues. To prevent this, back up your WordPress site<\/a> and create a safe environment for experimentation.<\/p>
Hostinger’s managed website hosting for WordPress<\/a> offers automated backups to keep your files safe. The Business <\/strong>and Cloud Startup <\/strong>plans also come with a WordPress staging tool. This feature allows you to duplicate your website and test changes before deploying them to the live site.<\/p>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>Here’s how to set up a WordPress staging environment<\/a> with Hostinger:<\/p>
- \n
- Log in to hPanel<\/a><\/strong> and go to Websites<\/strong>.<\/li>\n\n\n\n
- Select your domain name and click Manage<\/strong>.<\/li>\n\n\n\n
- Navigate to WordPress <\/strong>→ Staging <\/strong>on the left sidebar.<\/li>\n\n\n\n
- Head to the Staging <\/strong>tab and click Create Staging<\/strong>.<\/li>\n<\/ol>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-15.png\")
<\/figure>- \n
- Create a subdomain for your staging environment. The process can take up to 15 minutes to complete.<\/li>\n<\/ol>
![\"Creating](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-11.png\")
<\/figure>2. Access Your Theme’s Stylesheet File<\/strong><\/p>
The next step is to customize your theme’s style.css<\/strong> file on the newly created staging site.<\/p>
\nPro Tip<\/h4>\n
To minimize error risks during testing, we recommend creating a WordPress child theme<\/a> instead of using the parent theme.<\/p>\n <\/div>\n\n\n\n<\/p>
With most hosting providers, it requires connecting to a third-party File Transfer Protocol (FTP) client. Luckily, Hostinger users can easily do this via hPanel<\/strong>:<\/p>
- \n
- Navigate to Files → File Manager<\/strong>, and choose Access files of (your domain)<\/strong>.<\/li>\n\n\n\n
- Open public_html<\/strong> → staging → wp_content → themes<\/strong>.<\/strong><\/li>\n\n\n\n
- Choose the WordPress theme you want to tweak and open its folder.<\/li>\n\n\n\n
- Double-click the theme’s style.css<\/strong> file to make changes.<\/li>\n\n\n\n
- Scroll down to the bottom of the text editor and enter this code:<\/li>\n<\/ol>
.main-navigation ul:hover li ul,\n.main-navigation ul:hover li ul li ul {\n display: inherit;\n}<\/pre>This will make your second-level and third-level items visible when users hover over them.<\/p>
Step 3: Customize the Mega Menu<\/strong><\/p>
To customize the menu styling further, enter your own code directly into the theme’s stylesheet. Below are some common examples of WordPress mega menu CSS snippets:<\/p>
Creating columns within the mega menu:<\/p>
.mega-menu li.mega-menu-column {\n width: 25%; \/* for a 4-column layout *\/\n float: left;\n padding: 10px;\n}<\/pre>Customizing the color, padding, and text style for each menu item:<\/p>
.mega-menu ul.mega-sub-menu li a {\n color: #555;\n padding: 8px 15px;\n display: block;\n text-decoration: none;\n}<\/pre>Optimizing the menu layout for mobile view:<\/p>
@media screen and (max-width: 767px) {\n .mega-menu li.mega-menu-column {\n width: 100%;\n float: none;\n }\n}<\/pre>Whether these code snippets will work as intended depends on the rest of your site’s CSS and HTML structure. That’s why it’s important to test each code and adjust as necessary.<\/p>
Best WordPress Mega Menu Plugins<\/h2>
While it’s possible to create a mega menu in WordPress without a plugin, this manual method is not suitable for users with little to no coding experience. If you’re a complete beginner, it’s best to use WordPress menu plugins to streamline the whole process.<\/p>
Apart from Max Mega Menu, here are the three best WordPress plugins<\/a> for creating a mega menu. You can install QuadMenu<\/strong> from the WordPress plugin directory, while WP Mega Menu Pro <\/strong>and JetMenu <\/strong>are only available in third-party marketplaces.<\/p>
1. QuadMenu<\/strong><\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-23.png\")
<\/figure>QuadMenu<\/a> is an open-source, native WordPress mega menu plugin that provides a wide range of themes and locations.<\/p>
With the free version, you can display a navigation menu widget within menus, customize breakpoints for menu collapse, and create a wide range of mega menu options. Those include off-canvas, sticky, horizontal, and vertical mega menus.<\/p>
The pro plans start at $49\/year<\/strong>, offering additional features such as tabs, login, register, social, and carousel menus.<\/p>
2. WP Mega Menu Pro<\/strong><\/p>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-25.png\")
<\/figure>WP Mega Menu<\/a> is an easy-to-use mega menu builder designed for beginners. It offers instant setup, allowing you to create responsive mega menus right away.<\/p>
Despite its focus on user-friendliness, this WordPress mega menu plugin offers extensive customization capabilities. You can easily tweak your fonts, menu types, post metadata, menu color schemes, and menu animations.<\/p>
- Open public_html<\/strong> → staging → wp_content → themes<\/strong>.<\/strong><\/li>\n\n\n\n
- Navigate to Files → File Manager<\/strong>, and choose Access files of (your domain)<\/strong>.<\/li>\n\n\n\n
- Select your domain name and click Manage<\/strong>.<\/li>\n\n\n\n
- Move down to Pages<\/strong>, select all pages, and click Add to Menu<\/strong>.<\/li>\n\n\n\n
- Item Font<\/strong>. Customize the menu typography to match your site design, including the font family, size, weight, color, and visual styling options.<\/li>\n\n\n\n
- Menu Items Align<\/strong>. Place all menu items to the left, center, or top right of your website.<\/li>\n\n\n\n
- Hover<\/strong>. Sub-menus will open instantly when a user hovers their mouse pointer over the parent menu. Since there’s no delay, this method works best for delivering a smooth navigation system.<\/li>\n\n\n\n
- Select Menu Locations <\/strong>and click Add another menu location<\/strong>.<\/li>\n\n\n\n
- Second-level menu<\/strong>. It will be visible when users hover or click a top-level menu item. For instance, fashion brands usually list Clothing <\/strong>as one of the second-level items in the Products section.<\/li>\n\n\n\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-26.png\")
<\/figure>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-21.png\")
<\/figure>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/image-24.png\")
<\/figure>