{"id":18492,"date":"2020-03-30T11:35:00","date_gmt":"2020-03-30T11:35:00","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18492"},"modified":"2025-11-10T10:31:26","modified_gmt":"2025-11-10T10:31:26","slug":"jetmenu-how-to-create-a-hamburger-menu","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/","title":{"rendered":"How to Create a Hamburger Menu"},"content":{"rendered":"\n

In this guide, you will learn how to adjust the Hamburger Menu <\/strong>widget in order to display it on your WordPress website, for example, by placing it in the header.<\/p>\n\n\n\n

Create a Hamburger Menu<\/strong><\/h2>\n\n\n\n
\n

Navigate to the page\/template where you want to place a menu. In this guide, we will insert the header built with JetThemeCore<\/em><\/a>. To do this, navigate to WordPress Dashboard > Crocoblock > Theme Templates<\/em><\/strong>, locate the header we previously created, and click the \u201cEdit\/Edit with Elementor<\/strong>\u201d button to open the editor.\u00a0<\/p>\n\n\n\n

Our header is built with Elementor, so it is now open in this editor. However, you are free to use the Blocks Editor (Gutenberg)<\/a> as an alternative. The settings of the Hamburger Menu <\/strong>are the same in these two builders.<\/p>\n\n\n\n

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

Drag-n-drop the Hamburger Menu<\/strong> widget\/block to the needed section.<\/p>\n\n\n\n

Now, let\u2019s have a look at the widget\u2019s settings. In the Options<\/strong> section, select the Menu <\/strong>for the desktop and the Menu for Mobile<\/strong>. You can choose the same menus, or you can choose one menu for the desktop and a different menu for the mobile view.<\/p>\n\n\n\n

Then, select the Layout<\/strong>, Toggle Position<\/strong>, and Container Position<\/strong>, and choose the required option as the Sub Menu Trigger<\/strong>, and the corresponding one as the Trigger Element<\/strong>. Also, you can select the sub-menu layout in the Show Sub Menu Layout <\/strong>dropdown.<\/p>\n\n\n\n

Next, you can activate the Mega Content Ajax Loading <\/strong>toggle to load mega content with AJAX and the Close After Navigation <\/strong>toggle to close the menu after link navigation.<\/p>\n\n\n\n

Also, you can add a header template, a before items template and an after items template in the corresponding dropdown menus. If you want to add both before and after templates, then the before items template will be under the after items template.<\/p>\n\n\n\n

Here, you can also enable an icon, badge, description, divider, breadcrumbs, and a toggle button loader.<\/p>\n\n\n\n

If the breadcrumbs are enabled, you can also set the Breadcrumbs Path<\/strong>.<\/p>\n\n\n\n

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

The next settings tab is called Content<\/strong>. Here, you can choose Toggle Closed State Icon<\/strong> and Toggle Opened State Icon<\/strong> from the icon library or upload your own icon in the SVG format and add a Toggle Text<\/strong>. In the same way, you can add a Container Close Icon <\/strong>and Container Back Icon<\/strong>, set the Back Text<\/strong>, pick the Submenu Icon <\/strong>and the Breadcrumbs Divider Icon<\/strong>, and activate the Fill SVG icons<\/strong>.<\/p>\n\n\n\n

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

After you\u2019ve completed the menu customization, you can proceed to the Style <\/strong>settings and style your menu according to your taste.<\/p>\n\n\n\n

Once the needed changes are made, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Now, it\u2019s time to see the menu in action. So, proceed to the page where the menu is located. In our case, this can be the home page, where the header we edited earlier is shown. <\/p>\n\n\n\n

Click the Hamburger Menu <\/strong>button to access the menu.<\/p>\n\n\n\n

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

Once clicked, you will observe the adjusted menu.<\/p>\n\n\n\n

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

That\u2019s it; now you know how to create a menu for your website with the help of the Hamburger Menu<\/strong> widget\/block from the JetMenu <\/em>plugin for WordPress websites.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to build a WordPress menu using the JetMenu plugin and display it on your website using the Hamburger Menu widget\/block. <\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[425],"yoast_head":"\nHow to Create a Hamburger Menu \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.\" \/>\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\/jetmenu-how-to-create-a-hamburger-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Hamburger Menu \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T10:31:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/theme-templates-directory-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=\"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\/jetmenu-how-to-create-a-hamburger-menu\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/\",\"name\":\"How to Create a Hamburger Menu \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-03-30T11:35:00+00:00\",\"dateModified\":\"2025-11-10T10:31:26+00:00\",\"description\":\"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/#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 Create a Hamburger Menu\"}]},{\"@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 a Hamburger Menu \u2014 JetMenu | Crocoblock","description":"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.","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\/jetmenu-how-to-create-a-hamburger-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Hamburger Menu \u2014 JetMenu | Crocoblock","og_description":"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/","og_site_name":"Help Center","article_modified_time":"2025-11-10T10:31:26+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/theme-templates-directory-1024x640.webp"}],"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\/jetmenu-how-to-create-a-hamburger-menu\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/","name":"How to Create a Hamburger Menu \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-03-30T11:35:00+00:00","dateModified":"2025-11-10T10:31:26+00:00","description":"Learn how to display the menu on your website with the help of the Hamburger Menu widget from the JetMenu plugin for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/jetmenu-how-to-create-a-hamburger-menu\/#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 Create a Hamburger Menu"}]},{"@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\/18492"}],"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=18492"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=18492"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=18492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}