{"id":6336,"date":"2022-11-09T13:40:32","date_gmt":"2022-11-09T11:40:32","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6336"},"modified":"2024-01-09T17:20:42","modified_gmt":"2024-01-09T15:20:42","slug":"menu-desktop-off-canvas","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-desktop-off-canvas\/","title":{"rendered":"Menu &#8211; Desktop Off Canvas"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e199660be0e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e199660be0e\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-09-at-14.47.19.png\" alt=\"\" class=\"wp-image-6339\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The <strong>Off Canvas Menu<\/strong> on the desktop view in action.<\/figcaption><\/figure>\n\n\n\n<p>With Blocksy Pro, you can easily streamline the navigation system of your website by offering a consistent experience between the desktop and mobile views. This menu is very similar to the one that&#8217;s already present on the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-mobile\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-mobile\/\">mobile view<\/a> and can be configured using the same options.<\/p>\n\n\n\n<p>To get started, simply drag the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/trigger\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/trigger\/\">Trigger element<\/a> on one of the header rows, while in the desktop view.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e199660c286&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e199660c286\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-09-at-16.04.22.png\" alt=\"\" class=\"wp-image-6344\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\"><strong>Off Canvas Area<\/strong> configuration options.<\/figcaption><\/figure>\n\n\n\n<p>Now, if you look closely above, you will see the Off Canvas Area, which slides out on the screen when the Trigger element is pressed. This little area is common with the mobile view as well, but does not share the same element configuration between them. The layout created by the elements you put inside the desktop off canvas area are different from the mobile view.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-09-at-16.52.20.png\" alt=\"\" class=\"wp-image-6351\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading\">Reveal<\/h5>\n\n\n\n<p>This little option lets you select from two different styles for the off canvas area. The <strong>Modal<\/strong> option will open the area in full screen, covering the page from behind, while the <strong>Side Panel<\/strong> option will let the panel slide in from the <strong>left side<\/strong> or the <strong>right side<\/strong>.<\/p>\n\n\n\n<p>The <strong>Panel Width<\/strong> option is only applicable if you have selected the <strong>Side Panel<\/strong> view and lets you define the size of the panel.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Alignment Options<\/h5>\n\n\n\n<p>These options will let you select how the contents of the off canvas area are aligned. You can modify those on the <strong>vertical axis<\/strong>, as well as on the <strong>horizontal axis<\/strong>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>With Blocksy Pro, you can easily streamline the navigation system of your website by offering a consistent experience between the desktop and mobile views. This menu is very similar to the one that&#8217;s already present on the mobile view and can be configured using the same options. To get started, simply drag the Trigger element [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6338,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6336","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"blocksy_meta":{"post_title_panel":"","has_hero_section":"default","b951320c815e01624bdaeb3b76444ceb":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"a2951f8bd8665e2028163c5f585f79ba":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","a1a9f95c5a7e3b0e6b183d389ff6756b":"","hero_structure":"narrow","a3f8e2c979f86eddb8607942c4e8c8ba":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"8aa9f02539ec5988f0723cdd0c586698":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"14aeb0195420b43a6dac1d43271f00fc":"","page_structure_type":"default","859cf728318f42d3dc25b2e530f28d68":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"0a1ab4585a6027a8933b2be62beb2cc9":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","422787f5be4763dddcef99398b68bc6f":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","a4acc514ad13b84c389acb095c5b3b76":"","header_footer_scripts_panel":"","header_scripts":"","b6097c52f4f41134e7d065e849719800":"","header_after_body_scripts":"","52c8243061a4f17245421150de1b4b66":"","footer_scripts":"","docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6336"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6336\/revisions"}],"predecessor-version":[{"id":9146,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6336\/revisions\/9146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6338"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6336"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}