{"id":1051,"date":"2020-11-13T17:03:19","date_gmt":"2020-11-14T00:03:19","guid":{"rendered":"https:\/\/kadence-theme.com\/?post_type=knowledgebase&#038;p=1051"},"modified":"2022-06-29T06:56:48","modified_gmt":"2022-06-29T06:56:48","password":"","slug":"how-to-add-a-toggle-open-menu-for-desktop","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/how-to-add-a-toggle-open-menu-for-desktop\/","title":{"rendered":"How to add a toggle open menu for desktop"},"content":{"rendered":"\n<p>One of the features of Kadence Pro is the <strong>Toggle Widget Area<\/strong> header builder item using which a hamburger menu icon can be set to slide open an Off Canvas widget area.<\/p>\n\n\n\n<p>Any number of widgets including a Navigation Menu can be added inside this widget area. Here is a quick demo of Toggle Widget Area in action:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area.mp4\"><\/video><\/figure>\n\n\n\n<pre class=\"wp-block-verse\">Note: This feature is currently available for Desktops and not Tablets\/Mobiles.<\/pre>\n\n\n\n<p>To get started make sure you have entered your license details at Appearance &gt; Kadence first and then enable&nbsp;<strong>Header Addons<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/header-addons-kadence-pro.png\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/header-addons-kadence-pro-1024x576.png\" alt=\"Header Addons in Kadence Pro\" class=\"wp-image-564\" \/><\/a><\/figure>\n\n\n\n<p>Click on Customize link under Header Addons or visit the WordPress Customizer via the admin menu link under Appearance or via the WP toolbar link if on the front end.<\/p>\n\n\n\n<p>Go to the <strong>Header<\/strong> section.<\/p>\n\n\n\n<p>Drag <strong>Toggle Widget Area<\/strong> item into your desired location.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-header-kadence.jpg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-header-kadence-1024x545.jpg\" alt=\"Dragging Toggle Widget Area into the Header Builder\" class=\"wp-image-592\" \/><\/a><\/figure><\/div>\n\n\n\n<p>To configure the Toggle Widget Area, click on the pencil icon in the header or the gear icon in the header builder.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-header-editing.jpg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-header-editing-1024x545.jpg\" alt=\"Configuring Toggle Widget Area\" class=\"wp-image-593\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Trigger Menu text which is typically &#8220;Menu&#8221; will appear to the left of the hamburger menu icon.<\/p>\n\n\n\n<p>To add widgets inside the Off Canvas Widget Area click on <strong>Add Widget Items<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-general-settings.png\" alt=\"Toggle Widget Area general settings\" class=\"wp-image-594\" width=\"290\" height=\"524\" \/><\/figure><\/div>\n\n\n\n<p>Widgets can be added by clicking on <strong>+ Add a Widget<\/strong> button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/header-off-canvas-kadence.png\" alt=\"Header Off Canvas configuration\" class=\"wp-image-595\" width=\"269\" height=\"1188\" \/><\/figure><\/div>\n\n\n\n<p>You are most likely going to be adding a Navigation Menu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/adding-widgets-in-header-off-canvas.jpg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/adding-widgets-in-header-off-canvas-1024x576.jpg\" alt=\"Adding widgets in Header Off Canvas\" class=\"wp-image-596\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/selecting-menu-navigation-menu-header-off-canvas.png\" alt=\"\" class=\"wp-image-597\" \/><\/figure><\/div>\n\n\n\n<p>Below are the available Design settings:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/toggle-widget-area-design.png\" alt=\"\" class=\"wp-image-600\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the features of Kadence Pro is the Toggle Widget Area header builder item using which a hamburger menu icon can be set to slide open an Off Canvas widget area. Any number of widgets including a Navigation Menu can be added inside this widget area. Here is a quick demo of Toggle Widget&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[408],"doc_tag":[],"knowledge_base":[6],"class_list":["post-1051","docs","type-docs","status-publish","hentry","doc_category-theme-pro","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":217,"total_views":"8480","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Theme Kit Pro","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-pro\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":408,"label":"Theme Kit Pro"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=1051"}],"version-history":[{"count":1,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1051\/revisions"}],"predecessor-version":[{"id":5387,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1051\/revisions\/5387"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=1051"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=1051"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=1051"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=1051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}