{"id":4306,"date":"2019-01-31T09:45:05","date_gmt":"2019-01-31T09:45:05","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=4306"},"modified":"2024-01-19T14:36:14","modified_gmt":"2024-01-19T14:36:14","slug":"make-fullwidth-elementor-mega-menu-with-jetmenu","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/","title":{"rendered":"How to Make a Fullwidth Mega Menu in Elementor"},"content":{"rendered":"\n

It is always a good thing to know some features to boost the website. By making your mega menu fullwidth, you show it off to its full extent. Follow the steps below to learn how to create a fullwidth mega menu of the JetMenu<\/a> plugin for showcasing more content inside the items.<\/p>\n\n\n\n

We will explain how to enable the fullwidth mode both for the Revamp Menu and the classic Mega Menu.<\/p>\n\n\n\n

Making a Fullwidth Mega Menu with Revamped Menu<\/h2>\n\n\n\n
\n

Build a Revamp Menu<\/a> if you haven\u2019t done it yet. Once ready, open the page with a mega menu in the header and go to More Tools > Developers Tools<\/em><\/strong> in the browser panel.<\/p>\n\n\n\n\"developer\n\n\n\n

Click the \u201cSelect an element in the page to inspect it\u201d<\/strong> icon in the appeared bar and inspect the section that takes up the entire page\u2019s width.<\/p>\n\n\n\n

Now, all you need to do is find this section\u2019s CSS class<\/strong> and copy it.<\/p>\n\n\n\n\"developer\n\n\n\n

Go over to the heading template. Proceed to the Mega Container Width Type<\/strong> option and choose \u201cSelector\u201d from the drop-down menu.<\/p>\n\n\n\n

Paste the copied CSS class <\/strong>into the field. Since it is a CSS class, a dot is required before the name of this class (e.g., \u201c.custom-section\u201d). Click on the \u201cUpdate<\/strong>\u201d button to save the changes.<\/p>\n\n\n\n\"mega\n\n\n\n

Go back to the page where you\u2019ve got a mega menu, and refresh it. Now you can see that the mega menu takes all the width of the page.<\/p>\n\n\n\n\"header\n<\/div><\/div>\n\n\n\n

Making a Fullwidth Mega Menu<\/strong><\/h2>\n\n\n\n
\n

The process will be similar to the fullwidth Revamp Menu building. So, repeat steps with Developer Tools mentioned above and move on to the next one.<\/p>\n\n\n\n

Navigate to the Crocoblock > JetPlugins Settings<\/em><\/strong> section and open the JetMenu <\/strong>settings. <\/strong>In the Desktop Menu <\/strong>tab, you need to find the Mega menu base width<\/strong> option. There are three options from which you can choose.<\/p>\n\n\n\n

Select the \u201cWidth same as Custom CSS selector width\u201d option. <\/strong>Insert a copied CSS class in the Mega menu width selector<\/strong> field.<\/p>\n\n\n\n

Remember to type the dot before the name of this class (e.g., \u201c.custom-section\u201d). Then save the settings.<\/p>\n\n\n\n\"mega\n\n\n\n

Go back to the page where you\u2019ve got a mega menu, and refresh it. Now you can see that the mega menu takes all the width of the page.<\/p>\n\n\n\n\"header\n\n\n\n

All in all, the fullwidth mega menu is ready. Besides, check the article about making the fullwidth submenu<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n

Now you know how to customize the mega menu width and in which way you can make it fullwidth with the JetMenu<\/strong> plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will learn how to configure the mega menu to take up all the width of the page with the JetMenu plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[256],"yoast_head":"\nHow to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-19T14:36:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/developer-tools-location-full.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/\",\"name\":\"How to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:45:05+00:00\",\"dateModified\":\"2024-01-19T14:36:14+00:00\",\"description\":\"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make a Fullwidth Mega Menu in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock","description":"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.","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:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock","og_description":"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/","og_site_name":"Help Center","article_modified_time":"2024-01-19T14:36:14+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/developer-tools-location-full.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/","name":"How to Make Fullwidth Mega Menu \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:45:05+00:00","dateModified":"2024-01-19T14:36:14+00:00","description":"Learn how to adjust JetMenu settings to make your mega menu fullwidth within a few simple actions. Discover Crocoblock plugins for Elementor.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/make-fullwidth-elementor-mega-menu-with-jetmenu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Make a Fullwidth Mega Menu in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/4306"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=4306"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=4306"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=4306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}