{"id":6336,"date":"2022-11-09T13:40:32","date_gmt":"2022-11-09T11:40:32","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=6336"},"modified":"2026-10-08T11:02:45","modified_gmt":"2026-10-08T08:02:45","slug":"menu-desktop-off-canvas","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-desktop-off-canvas\/","title":{"rendered":"Menu – Desktop Off Canvas"},"content":{"rendered":"\n
\n
\"Desktop\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Desktop Off Canvas Menu in action.<\/figcaption><\/figure>\n\n\n\n

Blocksy Pro lets you use the Off Canvas Area<\/strong> on desktop devices, giving you an alternative way to present navigation and other Header Elements without keeping them permanently visible inside the regular header rows.<\/p>\n\n\n\n

The Off Canvas Area is opened using the Trigger<\/strong><\/a> element. You can populate the panel with the Menu \u2013 Mobile<\/strong><\/a> element as well as other supported Header Elements.<\/p>\n\n\n\n

\n

Blocksy Pro required<\/strong>
Using the Off Canvas Area on desktop devices requires Blocksy Pro. The Off Canvas Area used by the mobile header remains available separately.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Getting Started<\/h2>\n\n\n\n

To create a desktop Off Canvas layout:<\/p>\n\n\n\n

    \n
  1. Open the Customiser \u2192 Header<\/strong>.<\/li>\n\n\n\n
  2. Switch the Header Builder to its desktop<\/strong> view.<\/li>\n\n\n\n
  3. Drag the Trigger<\/strong><\/a> element into one of the desktop header rows.<\/li>\n\n\n\n
  4. Populate the Off Canvas Area<\/strong> with the menu and any other supported Header Elements you want to display.<\/li>\n\n\n\n
  5. Select the Off Canvas Area<\/strong> itself to configure its layout and appearance.<\/li>\n<\/ol>\n\n\n\n
    \"Desktop\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    The Off Canvas Area inside the desktop Header Builder.<\/figcaption><\/figure>\n\n\n\n

    The desktop and mobile Off Canvas layouts are configured independently. This lets you use different elements, ordering and settings for each device view instead of having the desktop layout automatically mirror the mobile version.<\/p>\n<\/div>\n\n\n\n

    \n

    Granular Controls<\/h2>\n\n\n\n
    \n
    \n
    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Desktop Off Canvas Area configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n

    Reveal<\/h3>\n\n\n\n

    Choose how the Off Canvas Area appears when the Trigger element is activated:<\/p>\n\n\n\n

      \n
    • Modal<\/strong> \u2013 opens the Off Canvas Area across the available screen space, placing its contents prominently over the current page.<\/li>\n\n\n\n
    • Side Panel<\/strong> \u2013 slides the Off Canvas Area into view from one side of the browser window.<\/li>\n<\/ul>\n\n\n\n

      Panel Width<\/h4>\n\n\n\n

      When Side Panel<\/strong> is selected, use Panel Width<\/strong> to control how much horizontal space the Off Canvas Area occupies when opened.<\/p>\n\n\n\n

      Reveal From<\/h4>\n\n\n\n

      Choose whether the Side Panel enters the screen from the left<\/strong> or right<\/strong> side.<\/p>\n\n\n\n

      Off Canvas Offset<\/h4>\n\n\n\n

      Use the Off Canvas Offset<\/strong> control to fine-tune the positioning of the panel by applying additional space around its presentation. This can be useful when you do not want the Off Canvas Area to sit directly against the surrounding viewport edges.<\/p>\n\n\n\n

      Alignment Options<\/h3>\n\n\n\n

      Control how the elements inside the Off Canvas Area are positioned using separate horizontal<\/strong> and vertical<\/strong> alignment settings.<\/p>\n\n\n\n

      These settings affect the overall arrangement of the panel’s contents, while individual Header Elements can provide their own additional alignment controls where supported.<\/p>\n\n\n\n

      Panel Heading<\/h3>\n\n\n\n

      Enable or disable the heading displayed at the top of the Off Canvas Area. This can be useful when the panel needs an additional title or when you prefer a cleaner layout without one.<\/p>\n\n\n\n

      Panel Close Button<\/h3>\n\n\n\n

      Choose whether the dedicated close button is displayed inside the Off Canvas Area. When disabled, visitors can still close the panel by navigating elsewhere or by clicking or tapping outside of it.<\/p>\n\n\n\n

      Panel Offset<\/h3>\n\n\n\n

      Add space around the entire Off Canvas Area to move it away from the edges of the viewport. Increasing the offset creates a floating panel appearance by introducing an additional margin around the panel.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      Blocksy Pro lets you use the Off Canvas Area on desktop devices, giving you an alternative way to present navigation and other Header Elements without keeping them permanently visible inside the regular header rows. The Off Canvas Area is opened using the Trigger element. You can populate the panel with the Menu \u2013 Mobile element […]<\/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"],"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":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6336\/revisions"}],"predecessor-version":[{"id":15271,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6336\/revisions\/15271"}],"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}]}}