{"id":8549,"date":"2019-06-17T11:35:58","date_gmt":"2019-06-17T11:35:58","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=8549"},"modified":"2024-12-19T19:28:33","modified_gmt":"2024-12-19T19:28:33","slug":"creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/","title":{"rendered":"How to Setup Mega Menu for Mobile View"},"content":{"rendered":"\n

Configure the Mobile Render Settings<\/strong><\/h2>\n\n\n\n
\n

Go to WordPress Dashboard ><\/em><\/strong> Crocoblock > JetPlugins Settings > <\/em><\/strong>JetMenu<\/em><\/strong><\/a> > Mobile Render<\/em><\/strong> page to set the mobile mega menu. Unroll the needed tab and configure the required settings. In this case, we kept the default settings because the needed settings can be configured directly via the widget (e.g., the Layout<\/strong>, Toggle Position<\/strong>, Container Position<\/strong>, Show Sub Menu Trigger<\/strong>, Close After Navigation<\/strong>, and more).<\/p>\n\n\n\n

\"mobile<\/a><\/div>\n\n\n\n

Read the JetMenu Dashboard Overview<\/a> to learn how to manage the Mega Menu<\/strong> widget settings.<\/p>\n<\/div><\/div>\n\n\n\n

Setup<\/strong> Mega Menu for Mobile View<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > Crocoblock > Theme Templates<\/em><\/strong> tab and open the header template<\/a> with the Mega Menu<\/strong> widget added. Here, the only Layout<\/strong> tab is available. Then, move down to the Mobile Device Render<\/strong> toggle and enable it.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

If the Mobile Device Render<\/strong> toggle is disabled and the needed menu for mobile is not set, the widget will display the menu specified in the Menu <\/strong>settings of the Layout<\/strong> tab on all devices.<\/p><\/div><\/div>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Once activated, the Mobile<\/strong> Menu<\/strong> tab of this widget will appear.<\/p>\n\n\n\n

\"mobile<\/a><\/div>\n\n\n\n

Unroll this tab and select the needed menu in the Menu for Mobile<\/strong> drop-down list. In this case, we chose the \u201cMobile Menu\u201d option. Next, select the Mobile Device<\/strong> on which this menu will be displayed (in this case, we selected the \u201cMobile and Tablets\u201d option in the Mobile Device<\/strong> drop-down list).<\/p>\n\n\n\n

\"default<\/a><\/div>\n\n\n\n

Then, we modified the menu design\u2019s options. We set the \u201cLeft\u201d Container Position<\/strong>, enabled the Close After Navigation<\/strong>, Item Description Visible<\/strong>, and Item Divider Visible<\/strong> toggles, and selected the Loader Color<\/strong> and Toggle Closed State Icon<\/strong>.<\/p>\n\n\n\n

\"settings<\/a><\/div>\n\n\n\n

Once completed, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s it. Now you know how to set the mobile menu for your WordPress website using the JetMenu<\/em> plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[256],"yoast_head":"\nHow to Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.\" \/>\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\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-19T19:28:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/mobile-render-tab-settings-of-the-jetmenu-plugin-1024x640.webp\" \/>\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=\"3 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\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/\",\"name\":\"How to Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-17T11:35:58+00:00\",\"dateModified\":\"2024-12-19T19:28:33+00:00\",\"description\":\"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/#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 Setup Mega Menu for Mobile View\"}]},{\"@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 Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock","description":"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.","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\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock","og_description":"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/","og_site_name":"Help Center","article_modified_time":"2024-12-19T19:28:33+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/mobile-render-tab-settings-of-the-jetmenu-plugin-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/","name":"How to Create Responsive Mobile Mega Menu \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-17T11:35:58+00:00","dateModified":"2024-12-19T19:28:33+00:00","description":"Learn how to manage the Mega Menu widget settings to add different menus for the WordPress site and display them on mobiles and tablets.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/creating-a-responsive-mobile-mega-menu-with-jetmenu-for-elementor\/#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 Setup Mega Menu for Mobile View"}]},{"@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\/8549"}],"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=8549"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8549"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}