{"id":4485,"date":"2022-03-31T13:01:24","date_gmt":"2022-03-31T10:01:24","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&amp;p=4485"},"modified":"2022-03-31T13:01:24","modified_gmt":"2022-03-31T10:01:24","slug":"adding-the-off-canvas-menu-button-to-the-shortcuts-bar","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/code-snippets\/adding-the-off-canvas-menu-button-to-the-shortcuts-bar\/","title":{"rendered":"Adding the Off Canvas Menu button to the Shortcuts Bar"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/03\/Screen-Recording-2022-03-31-at-13.02.32.mov\"><\/video><figcaption>Custom shortcut button in action<\/figcaption><\/figure>\n\n\n\n<p>Many of you have asked us for a way to open the off canvas menu from the Shortcuts Bar extension. We&#8217;ve listened and delivered.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">General Prerequisites<\/h2>\n\n\n\n<p>You will need to create a custom shortcut action, assign a custom icon and label to it and as the link, you&#8217;ll need to set it as <code><span class=\"stk-highlight\">#offcanvas<\/span><\/code>, and the custom class for this button will be <code><span class=\"stk-highlight\">ct-offcanvas-trigger<\/span><\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Desktop Specific Prerequisites<\/h3>\n\n\n\n<p>If you&#8217;re looking to enable the off canvas action for the desktop view, you will first need to add the trigger element and populate the off canvas area with some elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Removing the Header Trigger desktop element<\/h3>\n\n\n\n<p>Because this is a little workaround, there&#8217;s no official way to remove the header trigger element from the desktop variant. Though, there&#8217;s nothing a little bit of CSS cannot solve. Simply integrate this snippet into the Additional CSS pane of the Customiser and you should be good to go.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 999px) {\n\t.ct-header-trigger {\n\t\tdisplay: none;\n\t}\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Many of you have asked us for a way to open the off canvas menu from the Shortcuts Bar extension. We&#8217;ve listened and delivered. General Prerequisites You will need to create a custom shortcut action, assign a custom icon and label to it and as the link, you&#8217;ll need to set it as #offcanvas, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[125],"class_list":["post-4485","documentation","type-documentation","status-publish","hentry","doc_categories-code-snippets"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"post_title_panel":"","has_hero_section":"default","ba3a83eb2120f5354adb96997f80d742":"","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}],"4dafa0758840387fad10b529f3e7cb1b":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","15b0dec5385c12bec4060666808a92d2":"","hero_structure":"narrow","12a0cae61cf3dedbcdad103b1b9d9ecb":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"dd36b701f43c54d605ea283f9eb04b9b":"","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},"2799e18d7ee07b9b7655bc781fa5fa54":"","page_structure_type":"default","fb8d2c2071d642b522dd12d7e14e2b9b":"","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)"}},"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}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"26162832f39d0945547da67253e96785":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","6aa4d86a39e842d1931874a0252ba170":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","0cc634c4b89249b1b472611dfb5ba97d":"","header_footer_scripts_panel":"","header_scripts":"","eaeff7ecb0a27762e3ab1318f87274ad":"","header_after_body_scripts":"","4bbbf50480cad7774a9bef1034cd4ea6":"","footer_scripts":"","docs_item_badge":"PRO"},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4485","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=4485"}],"version-history":[{"count":0,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4485\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=4485"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=4485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}