{"id":43590,"date":"2020-10-29T09:32:49","date_gmt":"2020-10-29T09:32:49","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=43590"},"modified":"2025-12-03T13:32:55","modified_gmt":"2025-12-03T11:32:55","slug":"wordpress-mega-menu","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/","title":{"rendered":"How to Build a Mega Menu on Your WordPress Website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"43590\" class=\"elementor elementor-43590\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9392098 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9392098\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-961306a\" data-id=\"961306a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-36d4b1e elementor-widget elementor-widget-text-editor\" data-id=\"36d4b1e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Looking for an easy way to create a WordPress mega menu?<\/p><p>Mega menus are big expandable menus where everything is visible at once <br \/>\u2014 visitors don&#8217;t need to hover over an awkward drop-down to try and pick the right option or dig into your footer to find what they&#8217;re looking for.\u00a0<\/p><p>Because mega menus are so useful, they&#8217;re a pretty universal option on many successful websites, from big <a href=\"https:\/\/elementor.com\/resources\/how-to\/build-ecommerce-website\/\" target=\"_blank\" rel=\"noopener\">e-commerce stores<\/a> like Amazon and Walmart to big publishers like NBC News and many other sites \u2014 may be your site as well by the end of this post.<\/p><p>However, WordPress doesn&#8217;t support mega menus by default. So unless your theme already has its own built-in mega menu feature (which is usually limited anyway), you can&#8217;t take advantage of this useful design tactic. That&#8217;s why we&#8217;re here to help.<\/p><p>In this tutorial, we&#8217;ll show you how you can create your own <a href=\"https:\/\/elementor.com\/features\/wordpress\/\">custom WordPress<\/a> mega menu using <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> and <a href=\"https:\/\/crocoblock.com\/plugins\/jetmenu\/\" rel=\"noopener\">Crocoblock&#8217;s JetMenu<\/a>. You&#8217;ll be able to customize every part of your mega menu using Elementor&#8217;s visual interface and you can even use display conditions to show different mega menus on different parts of your site.\u00a0<\/p><p>Most importantly, you&#8217;ll also be able to control responsive behavior, including an option to use different menus or templates for desktop vs mobile visitors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-101be1e9 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"101be1e9\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn How To Create a Sticky Sidebar Menu<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50cc1b6 blog-toc elementor-widget elementor-widget-heading\" data-id=\"50cc1b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14cbfe3 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"14cbfe3\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#when-should-you-add-a-mega-menu-in-wordpress\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">When Should You Add a Mega Menu in WordPress?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-you-need-to-design-a-wordpress-mega\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What You Need To Design a WordPress Mega Menu With Elementor<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-add-a-mega-menu-in-wordpress\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Add a Mega Menu in WordPress<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#set-up-your-regular-wordpress-menu\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">1. Set Up Your Regular WordPress Menu<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#enable-jetmenu-and-set-mega-menu-item\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">2. Enable JetMenu and Set Mega Menu Item<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#design-your-mega-menu-using-elementor\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3. Design Your Mega Menu Using Elementor<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#create-your-header-template-using-elementor\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">4. Create Your Header Template Using Elementor Theme Builder<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5bcfb2e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5bcfb2e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9dc9654\" data-id=\"9dc9654\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8341f66 elementor-widget elementor-widget-menu-anchor\" data-id=\"8341f66\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"when-should-you-add-a-mega-menu-in-wordpress\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cefe6b elementor-widget elementor-widget-heading\" data-id=\"3cefe6b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">When Should You Add a Mega Menu in WordPress?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9841634 elementor-widget elementor-widget-text-editor\" data-id=\"9841634\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Mega menus are a great option for a wide variety of WordPress sites. <a href=\"https:\/\/www.nngroup.com\/articles\/mega-menus-work-well\/\" rel=\"noopener\">In the words of research-based user experience experts, Nielsen Norman Group<\/a>, &#8220;mega menus work well for site navigation&#8230;They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.&#8221;<\/p><p>That&#8217;s a pretty good summary \u2014 mega menus provide a user-friendly option to highlight deeper content on your site.\u00a0<\/p><p>You only have so much space on your top-level <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" target=\"_blank\" rel=\"noopener\">navigation menu<\/a>. If you try to fit in more than six or so top-level navigation items, your menu will start to feel cluttered and overwhelming. However, you probably have more than six important pages on your site, so a mega menu gives you a user-friendly way to still make it easy for your visitors to find those other pages.<\/p><p>One niche where almost every single site uses a mega menu is <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\"   title=\"eCommerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25657\">e-commerce<\/a>. <a href=\"https:\/\/elementor.com\/how-to-create\/ecommerce-website\/\" target=\"_blank\" rel=\"noopener\">Online stores<\/a> have all types of lower-level categories that are important to show to visitors. A mega menu lets you do that in one stroke:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c95026b elementor-widget elementor-widget-image\" data-id=\"c95026b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/ecommerce-mega-menu-example-r4q73y7x8wf4f8ta53zvbrfpiynuw306flx2h6ve6u.png\" title=\"ecommerce-mega-menu-example\" alt=\"ecommerce-mega-menu-example\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-669edd1 elementor-widget elementor-widget-text-editor\" data-id=\"669edd1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is a huge upgrade from the &#8220;old&#8221; way of doing things, which was building stacked menus with lots of submenus. This required the visitor to be a master &#8220;hoverer&#8221; and one mistake would send them back to the beginning:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-687e586 elementor-widget elementor-widget-image\" data-id=\"687e586\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/stacked-menues-with-sub-menues-example-r4q70vayug7ad9ae4s1w5jfbfhujnsruocxrujful2.png\" title=\"stacked-menues-with-sub-menues-example\" alt=\"stacked-menues-with-sub-menues-example\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">An example of the \"wrong\" way to display lots of menu options<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42c3338 elementor-widget elementor-widget-text-editor\" data-id=\"42c3338\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s a couple of examples of big e-commerce stores that use mega menus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c6d29e elementor-widget elementor-widget-image\" data-id=\"3c6d29e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/walmart-mega-menu-example-r4q760h68t8rwftf3i3eaqp4gehus66z1tgfe1tahw.png\" title=\"walmart-mega-menu\" alt=\"walmart-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Walmart<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e2ea21 elementor-widget elementor-widget-image\" data-id=\"2e2ea21\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/etsy-mega-menu-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyug7g.png\" title=\"etsy-mega-menu\" alt=\"etsy-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Etsy<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f128494 elementor-widget elementor-widget-text-editor\" data-id=\"f128494\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Mega menus aren&#8217;t just for e-commerce stores, though. This tactic makes a great option for any type of website where you need to make lots of lower-level information accessible to your visitors.<\/p><p>For example, news websites, magazines, content publishers, businesses, etc. Here are some examples of the diverse ways that various sites incorporate mega menus into their designs:<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7224be9 elementor-widget elementor-widget-image\" data-id=\"7224be9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/usa-today-mega-menu-r4q6x14oxsy4ykv3jmbqh0ak3url8ajb5d1eav4pow.png\" title=\"usa-today-mega-menu\" alt=\"usa-today-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">USA Today<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56288ee elementor-widget elementor-widget-image\" data-id=\"56288ee\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/yelp-mega-menu-r4q71ni4jh9w1k5fk48p8cb591zk2pvss8ic8ua1e4.png\" title=\"yelp-mega-menu\" alt=\"yelp-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Yelp<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2211d2b elementor-widget elementor-widget-image\" data-id=\"2211d2b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/tilda-mega-menu-r4q74xxsgls0ofdecjfoyif83lrt0kxz8ipippefm4.png\" title=\"tilda-mega-menu\" alt=\"tilda-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Tilda<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4c4ee3 elementor-widget elementor-widget-image\" data-id=\"a4c4ee3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/duvine-mega-menu-r4q78q8dzkylfvvf8ocli2128h410oz239axatscjm.png\" title=\"duvine-mega-menu\" alt=\"duvine-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Duvine<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb8fcc9 elementor-widget elementor-widget-image\" data-id=\"fb8fcc9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/quasar-mega-menu-r4q76wfop6giv6izwvwpnimsni4c1vpui7mxpghwnq.png\" title=\"quasar-mega-menu\" alt=\"quasar-mega-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Quasar<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fa1635 elementor-widget elementor-widget-menu-anchor\" data-id=\"4fa1635\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-you-need-to-design-a-wordpress-mega\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9542d05 elementor-widget elementor-widget-heading\" data-id=\"9542d05\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What You Need To Design a WordPress Mega Menu With Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35f84c7 elementor-widget elementor-widget-text-editor\" data-id=\"35f84c7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor gives you a <a href=\"https:\/\/elementor.com\/features\/editor\/\" target=\"_blank\" rel=\"noopener\">visual drag-and-drop builder<\/a> with all the design capabilities you need to create your mega menu. However, to add the actual functionality to achieve the mega menu effect (beyond just the design), you&#8217;ll need the help of a third-party add-on.<\/p><p>Specifically, you need <a href=\"https:\/\/crocoblock.com\/plugins\/jetmenu\/\" rel=\"noopener\">JetMenu from Crocoblock<\/a>, which is listed in <a href=\"https:\/\/elementor.com\/addons\/\" target=\"_blank\" rel=\"noopener\">our Elementor add-ons database<\/a>. While there are other plugins that can add mega menu functionality to Elementor, JetMenu makes it easy to set up and includes a user-friendly interface.<\/p><p>It also offers the following benefits:<\/p><ul><li>It&#8217;s designed for Elementor so it&#8217;s compatible with all other Elementor widgets and features. You can even include dynamic content, like a list of your latest blog posts or products.<\/li><li>You can design everything using the familiar Elementor interface \u2014 there&#8217;s no need to use code or learn a new interface.<\/li><li>You can use different menus for desktop vs mobile visitors. You&#8217;ll also get other mobile-specific options to control mega menu behavior for mobile visitors.<\/li><\/ul><p>For the rest of the post, we&#8217;ll focus on showing you step-by-step how to set up a WordPress mega menu using Elementor and JetMenu<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e67b52b elementor-widget elementor-widget-menu-anchor\" data-id=\"e67b52b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-add-a-mega-menu-in-wordpress\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a52225 elementor-widget elementor-widget-heading\" data-id=\"8a52225\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Add a Mega Menu in WordPress<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adcc5a2 elementor-widget elementor-widget-text-editor\" data-id=\"adcc5a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s the basic process to create a mega menu with Elementor and JetMenu:<\/p><ol><li>Set up your menu (<strong>Appearance \u2192 Menus<\/strong>).<\/li><li>Enable JetMenu and choose the menu item that you want to open the mega menu.<\/li><li>Design your mega menu using Elementor.<\/li><li>Display your mega menu in a Header template using <a href=\"https:\/\/elementor.com\/features\/theme-builder\/\" target=\"_blank\" rel=\"noopener\">Elementor Theme Builder<\/a> and JetMenu&#8217;s mega menu widget.<\/li><\/ol><p>We&#8217;ll take you through everything step-by-step.<\/p><p>To get started, make sure to install the following plugins:<\/p><ul><li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a><\/li><li><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\">Elementor Pro<\/a> \u2013 you need this to create a custom header template using Theme Builder.<\/li><li><a href=\"https:\/\/crocoblock.com\/plugins\/jetmenu\/\">JetMenu<\/a> &#8211; you can purchase just the JetMenu plugin for $24 for use on a single site or you can buy a bundle of all the Crocoblock plugins for $130.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-745d7b2 elementor-widget elementor-widget-menu-anchor\" data-id=\"745d7b2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"set-up-your-regular-wordpress-menu\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc9e484 elementor-widget elementor-widget-heading\" data-id=\"bc9e484\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Set Up Your Regular WordPress Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6be0d0f elementor-widget elementor-widget-text-editor\" data-id=\"6be0d0f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To get started, you need to set up your basic menu using the regular WordPress menu settings. To access these settings, go to <strong>Appearance \u2192 Menus<\/strong>.<\/p><p>If you haven&#8217;t already created a menu for your site, you&#8217;ll want to make sure that you&#8217;ve set up the menu structure. In the next step, you&#8217;ll be able to turn one or more of the top-level menu items into a mega menu when a user hovers over it:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f644643 elementor-widget elementor-widget-image\" data-id=\"f644643\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"607\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=607\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-1-set-up-menu-structure.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68659\" alt=\"elementor-mega-menu-1-set-up-menu-structure\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-1-set-up-menu-structure.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-1-set-up-menu-structure-300x253.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a96f47 elementor-widget elementor-widget-text-editor\" data-id=\"6a96f47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For example, you can see that there&#8217;s a menu item for &#8220;Shop&#8221;. In the next step, you&#8217;ll be able to make it so that the mega menu expands when a user hovers over the Shop menu item.<\/p><p>Once you&#8217;re happy with the menu structure (or if you&#8217;ve already set up your menu structure), you can move on to the next step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a64977 elementor-widget elementor-widget-menu-anchor\" data-id=\"7a64977\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"enable-jetmenu-and-set-mega-menu-item\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0564787 elementor-widget elementor-widget-heading\" data-id=\"0564787\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Enable JetMenu and Set Mega Menu Item<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09b4e67 elementor-widget elementor-widget-text-editor\" data-id=\"09b4e67\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, use the toggle in the <strong>JetMenu Locations Settings<\/strong> to <strong>Enable JetMenu for current location<\/strong> under the <strong>Primary Menu<\/strong> settings.<\/p><p>Once you enable JetMenu, you can hover over the menu item that you want to trigger your mega menu and click the <strong>JetMenu<\/strong> button:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-836fd1a elementor-widget elementor-widget-image\" data-id=\"836fd1a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"663\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=663\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-2-enable-jetmeu.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68660\" alt=\"elementor-mega-menu-2-enable-jetmeu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-2-enable-jetmeu.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-2-enable-jetmeu-300x276.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-894946b elementor-widget elementor-widget-text-editor\" data-id=\"894946b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Clicking the <strong>JetMenu<\/strong> button should open a popup.<\/p><p>In the popup, make sure to set the <strong>Mega submenu enabled<\/strong> toggle to on and save your changes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7041575 elementor-widget elementor-widget-image\" data-id=\"7041575\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"528\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=528\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-3-enable-mega-submenu.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68661\" alt=\"elementor-mega-menu-3-enable-mega-submenu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-3-enable-mega-submenu.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-3-enable-mega-submenu-300x220.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f581a9 elementor-widget elementor-widget-text-editor\" data-id=\"1f581a9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That&#8217;s the only setting that you must configure, but there are other optional settings that you might want to consider. These other settings will let you:<\/p><ul><li>Change the mega menu position relative to the menu item.<\/li><li>Set a custom mega menu width.<\/li><li>Add icons or badges.<\/li><li>Set custom padding for the menu item.<\/li><\/ul><p>If you&#8217;re not sure how a certain setting will affect your mega menu, you can always come back to these settings later on once you get a feel for how your mega menu looks with the default settings.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02099cd elementor-widget elementor-widget-menu-anchor\" data-id=\"02099cd\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"design-your-mega-menu-using-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e55489 elementor-widget elementor-widget-heading\" data-id=\"6e55489\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Design Your Mega Menu Using Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5277967 elementor-widget elementor-widget-text-editor\" data-id=\"5277967\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, click the <strong>Edit Mega Menu Item Content<\/strong> button to launch the Elementor interface. The interface will open in a popup, but it&#8217;s the same regular Elementor interface other than that.<\/p><p>Now, you can create the design for the mega menu itself. This is the content that will appear underneath the menu item when a user hovers over it.<\/p><p>How you create this design is totally up to you. If you have no idea where to start, you can begin by creating a section with a two or three-column layout.<\/p><p>Here, we&#8217;ve created just a simple three-column dummy design to illustrate how you might go about it:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d7442b elementor-widget elementor-widget-image\" data-id=\"5d7442b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"528\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=528\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-5-design-mega-menu.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68662\" alt=\"elementor-mega-menu-5-design-mega-menu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-5-design-mega-menu.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-5-design-mega-menu-300x220.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89402bc elementor-widget elementor-widget-text-editor\" data-id=\"89402bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To give you an idea of how that design will eventually look on the front-end, here&#8217;s an example of the real mega menu being triggered on hover:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3aa99ed elementor-widget elementor-widget-image\" data-id=\"3aa99ed\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"280\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=280\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-6-front-end-mega-menu.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68663\" alt=\"elementor-mega-menu-6-front-end-mega-menu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-6-front-end-mega-menu.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-6-front-end-mega-menu-300x117.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c74088 elementor-widget elementor-widget-text-editor\" data-id=\"6c74088\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Again, this is just <a href=\"https:\/\/elementor.com\/hello-theme\/\" target=\"_blank\" rel=\"noopener\">the Hello theme<\/a> and some simple dummy content with a gray background to illustrate the concept. But you can see that the mega menu essentially just displays the section, but in a contained layout.<\/p><p>With this in mind, you can feel free to use any Elementor widgets in your design. You can even bring in dynamic content.\u00a0<\/p><p>For example, you could use the Posts widget to automatically showcase your latest blog posts in the mega menu. You can also include a contact form, maps, etc.<\/p><p>Make sure to save your design when you&#8217;re finished. You can close the popup by clicking the &#8220;X&#8221; in the top-right corner (the icon can be hard to see, but it should be there).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf42634 elementor-widget elementor-widget-menu-anchor\" data-id=\"bf42634\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"create-your-header-template-using-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f47b22b elementor-widget elementor-widget-heading\" data-id=\"f47b22b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Create Your Header Template Using Elementor Theme Builder<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88e8b37 elementor-widget elementor-widget-text-editor\" data-id=\"88e8b37\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At this point, you&#8217;re almost finished. The last step is to create a header <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25656\">template<\/a> using Elementor Theme Builder so that you can properly trigger your mega menu.<\/p><p>To do that, go to <strong>Templates \u2192 Theme Builder<\/strong> to open Elementor Theme Builder. Then, create a new header template:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adfd0c3 elementor-widget elementor-widget-image\" data-id=\"adfd0c3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"479\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=479\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-7-theme-builder-create-header.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68664\" alt=\"elementor-mega-menu-7-theme-builder-create-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-7-theme-builder-create-header.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-7-theme-builder-create-header-300x200.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3380b4d elementor-widget elementor-widget-text-editor\" data-id=\"3380b4d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can either choose from one of the pre-built header templates or design your own from scratch.<\/p><p>However, instead of using the built-in Elementor <strong>Nav Menu<\/strong> widget like you normally would, you need to add JetMenu&#8217;s <strong>Mega Menu<\/strong> widget (or the <strong>Vertical Mega Menu <\/strong>widget if you want to make it vertical instead of horizontal). You&#8217;ll see these elements in the <strong>JetElements <\/strong>section of the Elementor sidebar or you can search for them by name.<\/p><p>In the Mega Menu widget&#8217;s settings, you can choose the menu that you created in step #1 for desktop visitors.<\/p><p>You can use the same menu for mobile visitors or you also have the option to choose a separate menu for mobile visitors. To use separate menus, you would need to create another menu just for mobile visitors in the <strong>Appearance \u2192 Menus<\/strong> interface:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a836e3 elementor-widget elementor-widget-image\" data-id=\"6a836e3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"266\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=266\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-8-mega-menu-widget.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68665\" alt=\"elementor-mega-menu-8-mega-menu-widget\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-8-mega-menu-widget.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-8-mega-menu-widget-300x111.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f690b4 elementor-widget elementor-widget-text-editor\" data-id=\"6f690b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can also use the Mega Menu widget&#8217;s other settings to control the mobile layout and general design, style, and layout options.<\/p><p>In the <strong>Mobile Layout<\/strong> settings, you get a lot of options for configuring mobile behavior such as:<\/p><ul><li>Whether to have the mega menu slide out, drop-down, or push other content.<\/li><li>The container position.<\/li><li>Whether to close the mega menu after navigation.<\/li><li>Etc.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8ced79 elementor-widget elementor-widget-image\" data-id=\"a8ced79\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"721\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=721\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-9-mobile-layout.jpg\" class=\"attachment-medium_large size-medium_large wp-image-68666\" alt=\"elementor-mega-menu-9-mobile-layout\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-9-mobile-layout.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-9-mobile-layout-300x300.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150\/blog\/wp-content\/uploads\/2020\/10\/elementor-mega-menu-9-mobile-layout-150x150.jpg 150w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-477e6db elementor-widget elementor-widget-text-editor\" data-id=\"477e6db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And that&#8217;s it! Once you publish your header template, your new mega menu will be live.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9d2b76 elementor-widget elementor-widget-heading\" data-id=\"e9d2b76\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create a Custom Mega Menu for Your Own Website<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b38c0 elementor-widget elementor-widget-text-editor\" data-id=\"13b38c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If your site has a lot of content\/categories that you need to present to visitors, a mega menu is the best way to make those navigation items accessible while still keeping your site clean and user-friendly. That&#8217;s why you&#8217;ll see mega menus used by so many different websites.<\/p><p>WordPress doesn&#8217;t make it easy to create a mega menu by default. But with Elementor and Crocoblock, you get the ability to create your own custom mega menus using Elementor&#8217;s visual, drag-and-drop interface.<\/p><p>Create your first mega menu today and enhance your WordPress site&#8217;s navigation. To get started, <a href=\"https:\/\/elementor.com\/help\/how-to-install-elementor\/\" target=\"_blank\" rel=\"noopener\">install Elementor<\/a> and <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\">Elementor Pro<\/a> and grab your copy of <a href=\"https:\/\/crocoblock.com\/plugins\/jetmenu\/\">JetMenu<\/a>.<\/p><p>Do you still have any questions about how to create a WordPress mega menu with Elementor and Crocoblock? Ask us in the comments!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do your site visitors need to hover over an awkward drop-down, in the hopes of picking the right option? Then you need a mega-menu. In this tutorial, we&#8217;ll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.<\/p>\n","protected":false},"author":4,"featured_media":43917,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45,44,43],"tags":[79],"marketing_persona":[47,51],"marketing_intent":[49],"class_list":["post-43590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-elementor","category-wordpress","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a Mega Menu on Your WordPress Website<\/title>\n<meta name=\"description\" content=\"In this step-by-step tutorial, we&#039;ll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Mega Menu on Your WordPress Website\" \/>\n<meta property=\"og:description\" content=\"In this step-by-step tutorial, we&#039;ll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-29T09:32:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T11:32:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"How to Build a Mega Menu on Your WordPress Website\",\"datePublished\":\"2020-10-29T09:32:49+00:00\",\"dateModified\":\"2025-12-03T11:32:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\"},\"wordCount\":1964,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Development\",\"Elementor\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\",\"url\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\",\"name\":\"How to Build a Mega Menu on Your WordPress Website\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png\",\"datePublished\":\"2020-10-29T09:32:49+00:00\",\"dateModified\":\"2025-12-03T11:32:55+00:00\",\"description\":\"In this step-by-step tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build a Mega Menu on Your WordPress Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Mega Menu on Your WordPress Website","description":"In this step-by-step tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Mega Menu on Your WordPress Website","og_description":"In this step-by-step tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.","og_url":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-10-29T09:32:49+00:00","article_modified_time":"2025-12-03T11:32:55+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"How to Build a Mega Menu on Your WordPress Website","datePublished":"2020-10-29T09:32:49+00:00","dateModified":"2025-12-03T11:32:55+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/"},"wordCount":1964,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png","keywords":["Build"],"articleSection":["Development","Elementor","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/","url":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/","name":"How to Build a Mega Menu on Your WordPress Website","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png","datePublished":"2020-10-29T09:32:49+00:00","dateModified":"2025-12-03T11:32:55+00:00","description":"In this step-by-step tutorial, we'll show you how to create your own custom WordPress mega menu using Elementor and Crocoblock.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/wordpress-mega-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/10\/How-To-Build-a-Mega-Menu-01.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How to Build a Mega Menu on Your WordPress Website"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/43590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=43590"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/43590\/revisions"}],"predecessor-version":[{"id":146472,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/43590\/revisions\/146472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/43917"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=43590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=43590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=43590"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=43590"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=43590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}