{"id":139782,"date":"2018-09-21T11:00:35","date_gmt":"2018-09-21T16:00:35","guid":{"rendered":"https:\/\/getflywheel.com\/?p=29341"},"modified":"2024-10-02T14:46:19","modified_gmt":"2024-10-02T19:46:19","slug":"add-mega-menu-to-wordpress-site-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/","title":{"rendered":"How to Add a Mega Menu to your WordPress Site"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you have a website with a large amount of content and want to show more items in the menu, consider using a mega menu. Mega menus are especially effective for eCommerce sites with lots of product categories, as you can show a product image alongside different categories, like eBay does.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, you can create dropdown menus in WordPress with multi-level options, but you can&#8217;t create a mega menu. Some premium themes like <a href=\"https:\/\/themeforest.net\/item\/avada-responsive-multipurpose-theme\/2833226\" target=\"_blank\" rel=\"noopener noreferrer\">Avada<\/a> or <a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divi<\/a> have mega menu options built in, but what if you want to have one in your free theme? In this article, we&#8217;ll show you how to use a plugin to add a mega menu on a WordPress site.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/www.megamenu.com\/\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/How-to-add-a-mega-menu-to-your-WordPress-site-screen-replace.png\" alt=\"oman looking at mega menu on desktop\" class=\"wp-image-29649\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Mega Menu in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a mega menu, first you need to install<a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener noreferrer\"> the Max Mega Menu<\/a> plugin from the WordPress Plugin Directory. It\u2019s one of the best free plugins available in the library. Once installed and activated, you\u2019ll see a new menu item labeled <strong>Mega Menu<\/strong> in the dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To enable the max mega menu, go to <strong>Appearance &gt; Menus<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the menu page, click on the <strong>Enable<\/strong> checkbox in the <strong>Max Mega Menu Settings<\/strong> section and then click <strong>Save<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-menu-save-enable.png\" alt=\"wordpress menu save enable screenshot\" class=\"wp-image-29621\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t need to do anything with the other remaining options, but you can play around to see the effects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With that, you\u2019ll see the plugin taking over the default menu on the front-end.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-sample-page.jpg\" alt=\"mega menu wordpress tutorial screenshot sample page\" class=\"wp-image-29622\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s explore some of the settings through a real-life example. We\u2019ll try to recreate something similar to eBay\u2019s mega menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s what the menu looks like.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/www.ebay.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-example-electronice-ebay.jpg\" alt=\"ebay mega menu example screenshot\" class=\"wp-image-29623\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, the mega menu has list items in two columns and an image in another column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, let&#8217;s create the menu structure. There are two ways you can create the menu here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One is the default WordPress drag-and-drop menu editor. You can stack the menu items one after another as you would normally create any dropdown menu, but the design we\u2019re going after here can become a little messy and hard to maintain with this method.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-drag-and-drop-menu-structure.png\" alt=\"and drop mega menu feature screenshot\" class=\"wp-image-29624\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The second option is to use widgets within the mega menu. Hover over the item you want to have the mega menu and click on the <strong>Mega Menu<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-sample-page-settings-mega-menu.png\" alt=\"sample page settings mega menu\" class=\"wp-image-29625\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019ll open a pop-up. Then select <strong>Mega Menu &#8211; Grid Layout<\/strong> from the <strong>Sub menu display mode<\/strong> dropdown in the <strong>Mega Menu<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-mega-menu-grid-layout.png\" alt=\"grid layout option screenshot\" class=\"wp-image-29626\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is the best option for creating custom mega menu layouts. The other options are not very flexible, but you can always play around to know more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the <strong>+ Column<\/strong> button to add more columns.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-mega-menu-add-column.png\" alt=\"add columns screenshot\" class=\"wp-image-29627\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To create a mega menu like eBay\u2019s, we need two 3\/12 columns and one 6\/12 column. (This will make the third column twice as large as the first two, plenty of space for a nice big image!) You can adjust the column width by clicking the <strong>left<\/strong> or <strong>right arrow<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-adjust-column-width-left-right-arrow.png\" alt=\"adjust column width with left and right arrows\" class=\"wp-image-29628\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To add a widget, click the <strong>Select a Widget to add to the panel<\/strong> dropdown at the top right corner and choose a widget.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-select-a-widget-to-add-to-panel-navigation-menu.png\" alt=\"add a navigation menu from the select widget dropdown screenshot\" class=\"wp-image-29629\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For this design, we\u2019ve already created a dummy menu. We\u2019ll add that to the first two columns through the <strong>Navigation Menu<\/strong> widget.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-select-menu-category-1.png\" alt=\"category 1 dropdown option screenshot\" class=\"wp-image-29630\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For the third column, we can&nbsp;add an image through the <strong>Image<\/strong> widget.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-image-title.png\" alt=\"screenshot of image title third column\" class=\"wp-image-29631\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can easily drag and drop columns and widgets to rearrange them, and you can even hide columns for different devices by clicking on the small icons located at the top of each column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now if you look at the menu design on the site, the mega menu structure is complete. Now we just need to adjust the style to match the theme!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-image-added-to-mega-menu.jpg\" alt=\"image added to mega menu\" class=\"wp-image-29637\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For style adjustments, go to <strong>Mega Menu &gt; Menu Themes &gt; Menu Bar<\/strong>. We\u2019ll change the menu bar color and other settings to match the theme.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-menu-themes-menu-bar.png\" alt=\"mega menu menu themes menu bar screenshot options\" class=\"wp-image-29633\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">From the <strong>Mega Menus<\/strong> tab, you can adjust the dropdown style. Once adjustments are done, click on <strong>Save Changes<\/strong> at the bottom.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-mega-menus-color.png\" alt=\"mega menu setting color adjust save changes settings screenshot\" class=\"wp-image-29635\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Flyout Menus<\/strong> tab is for a flyout menu style adjustment, and from the <strong>Mobile Menu<\/strong> tab, you can set the mobile breakpoint and styling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also write your own custom CSS in the <strong>Custom Styling<\/strong> tab&nbsp;like I\u2019ve done here.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-menu-themes-custmo-styling.png\" alt=\"adjust custom settings option in menu bar screenshot\" class=\"wp-image-29636\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With these style adjustments, our mega menu is now ready!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-screenshot-categories-preview.jpg\" alt=\"mega menu wordpress screenshot categories preview\" class=\"wp-image-29632\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re wondering about the<strong> General Settings<\/strong> tab, the default settings are good enough for most cases, but feel free to explore the possibilities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Full-Width Mega Menu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to create a full-width mega menu, unfortunately, there are no easy settings within the plugin, but you can still do it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, you need to find a full-width container. In this instance, it\u2019s <code>.navigation-top<\/code> class.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-inspect-navigation-top.jpg\" alt=\"create full-width menu inspect navigation top screenshot\" class=\"wp-image-29638\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the class name and paste it in the <strong>Outer Width<\/strong> box of <strong>Submenu Width<\/strong>, then save the changes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-outer-width-navigation-top.png\" alt=\"outer width navigation top\" class=\"wp-image-29639\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now if you check the menu in the front-end, it\u2019ll show a full-width mega menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Last, if you want to copy the same menu settings on another website, you can easily export and import the settings from the <strong>Tools<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/mega-menu-wordpress-mega-menu-tools.png\" alt=\"edit settings tools tab screenshot\" class=\"wp-image-29640\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">So, you&#8217;ve just learned how to create a mega menu in WordPress, even if your theme doesn&#8217;t have an option for it. If you\u2019re running a website that has a lot of content, mega menus can really help you organize your items in an effective way to enhance the user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To ensure every aspect of that mega menu is fast and functional, turn to WP Engine to <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">host your WordPress site<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have a website with a large amount of content and want to show more items in the menu, consider using a mega menu. Mega menus are especially effective for eCommerce sites with lots of product categories, as you can show a product image alongside different categories, like eBay does. By default, you can<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":140851,"template":"","resource-topic":[1396,912],"resource-role":[1397,896,897,899],"resource-type":[916],"class_list":["post-139782","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a Mega Menu to your WordPress Site<\/title>\n<meta name=\"description\" content=\"Organize your site efficiently, even if you&#039;ve got LOTS of content, with a mega menu structure that will enhance your users&#039; experinces!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Mega Menu to your WordPress Site\" \/>\n<meta property=\"og:description\" content=\"Organize your site efficiently, even if you&#039;ve got LOTS of content, with a mega menu structure that will enhance your users&#039; experinces!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T19:46:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/09\/mega-menu-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/\",\"name\":\"How to Add a Mega Menu to your WordPress Site\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-09-21T16:00:35+00:00\",\"dateModified\":\"2024-10-02T19:46:19+00:00\",\"description\":\"Organize your site efficiently, even if you've got LOTS of content, with a mega menu structure that will enhance your users' experinces!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Mega Menu to your WordPress Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Mega Menu to your WordPress Site","description":"Organize your site efficiently, even if you've got LOTS of content, with a mega menu structure that will enhance your users' experinces!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add a Mega Menu to your WordPress Site","og_description":"Organize your site efficiently, even if you've got LOTS of content, with a mega menu structure that will enhance your users' experinces!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-10-02T19:46:19+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/09\/mega-menu-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/","name":"How to Add a Mega Menu to your WordPress Site","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-09-21T16:00:35+00:00","dateModified":"2024-10-02T19:46:19+00:00","description":"Organize your site efficiently, even if you've got LOTS of content, with a mega menu structure that will enhance your users' experinces!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-mega-menu-to-wordpress-site-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add a Mega Menu to your WordPress Site"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/09\/mega-menu-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer, Site Owner","topic":"<strong>Topics:<\/strong> Design, Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/140851"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139782"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139782"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139782"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}