Source: https://divicake.com/blog/how-to-create-a-divi-mega-menu/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How To Create A Divi Mega Menu By Divi Cake·17 December 2023·Updated 3 January 2024·3 min read Mega menus are perfect for featuring products, top services, or highlighting blog posts! We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Understanding the Divi Mega Menu](https://divicake.com#understanding-the-divi-mega-menu) - [Creating Your WordPress Menu](https://divicake.com#creating-your-wordpress-menu) - [Integrating the Mega Menu CSS Class to the Mega Menu](https://divicake.com#integrating-the-mega-menu-css-class-to-the-mega-menu) - [Include More Items in the Submenu](https://divicake.com#include-more-items-in-the-submenu) - [Final look of Divi Mega Menu!](https://divicake.com#final-look-of-divi-mega-menu) - [Conclusion](https://divicake.com#conclusion) Have you heard about Divi’s special menu feature? It’s called a mega menu, and guess what? You can make these awesome menus using [Divi](https://divicake.com/go/divi/) without needing any plugin! In this guide, we will show you how to create one step by step. We’ll even make it look cooler using CSS. But before we start, let’s talk about what a mega menu really is. ## Understanding the Divi Mega Menu Imagine a [menu](https://divicake.com/blog/divi-menu-styles/) on a website - you click on a section and more options pop up. Those extra options are called a submenu. Now, picture a mega menu as a super-sized version of those submenus. Instead of just a few extra choices, it’s like having a bunch of submenus all lined up next to each other. It’s handy when you’ve got loads of things to include in your menu or if you want to organize pages in a specific way. Mega menus aren’t just for organizing stuff, though. They’re great for showcasing products, top services, or highlighting blog posts, too! ## Creating Your WordPress Menu Let’s start making a mega menu in Divi by setting up the menu in [WordPress](https://divicake.com/blog/best-wordpress-page-builder-plugins/). You can add any menu items you like, just make sure to put them in the right order. That’s the key to getting a great mega menu! Set up your menu in WordPress to create a Divi mega menu – order matters for a fantastic result! Creating WordPress Menu Check out how it looks at first. The main menu has four submenus under it. The mega menu initially features four sub-menus below it. Mega Menu looks at first ## Integrating the Mega Menu CSS Class to the Mega Menu If you want to turn a regular menu into a mega menu, there’s a little trick. You’ve got to give the mega menu item a special [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) class – the “mega-menu”. It’s like adding a secret code to make the menu go mega! Let us walk you through it in simple steps. Make sure to tick the box labeled “CSS Classes” up in the right corner of your admin screen under “Screen Options.” If you want to turn a regular menu into a mega menu, there’s a little trick. You’ve got to give the mega menu item a special CSS class Integrating the Mega Menu CSS Class to the Mega Menu Now, check out the new look after we added the “mega-menu” CSS class to the main [menu](https://divicake.com/blog/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu/) item! Let’s see how it transformed the menu. See the menu’s transformation with the “mega-menu” CSS class added to the main menu! Look of the Mega Menu after adding the CSS class to it ## Include More Items in the Submenu Now, let’s keep going by putting more sub menu items under each “column” in your menu. Add as many as you want. In our example, we put two under each column. So, go ahead and fill it up with whatever you like! Add as many sub-menu items as you like under each “column” in your menu! Including more items in the Submenu Read More: [Create and Style a Divi Menu: Add Icons and Images To The Divi Menu](https://divicake.com/blog/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu/) ## Final look of Divi Mega Menu! Final Look of Divi Mega Menu ## Conclusion Wrapping up your Divi Mega Menu journey, you’ve now mastered the art of creating this powerful feature right within Divi, no plugins needed! By understanding what a mega menu is and how it revolutionizes website navigation, you’ve unlocked the door to an array of possibilities. Starting with the basic concept of expanding menus through submenus, you’ve elevated it to a new level with mega menus - an organized, efficient way to present numerous items or showcase various content types on your site. With step-by-step guidance, you’ve learned the crucial setup within WordPress and the magic touch of the “mega-menu” CSS class. These simple tweaks have transformed your standard menu into an eye-catching, multi-column display, providing ample space to showcase your content or products effectively. Remember, the beauty of a mega menu lies in its flexibility. You can continue to tailor it to suit your needs by adding more items or customizing its appearance with CSS. Congratulations! Your Divi Mega Menu is ready to captivate your audience, streamline navigation, and present your site’s content in an impressive and user-friendly manner. Embrace this newfound power and make your website’s navigation a delightful experience for your visitors! Read More: [Fixing Divi Bugs: Effective Solutions and Troubleshooting](https://divicake.com/blog/fixing-divi-bugs/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## 1 comment - Sania6 January 2024 at 17:51 I found this article very helpful in creating a Mega Menu through Divi. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)