What is Off-Canvas Menu?

Off-canvas menu is positioned outside of the viewport and slides in when activated. It can provides an extremely useful and beautiful experience for your users. Below image is how Publisher Off-Canvas looks like.

Publisher Off-Canvas menu

How Can I Activate and Customize Off-Canvas Menu in Publisher?

Publisher not only has built-in Off-Canvas feature but also it has considerable options for it. For finding them go to Publisher → Theme Options → Header → Off-Canvas Panel.

off-canvas menu options

1- Show Off-Canvas Panel: Toggle it to Yes to activate this menu on your Publisher website.

2- Panel Position in Page: Choose to show panel in left or right. Look at the first image on this page, its position is left.

3- Panel Color Skin: Choose Dark or White color for your panel.

4- Show site branding in panel: You can show your site branding in Off-Canvas panel.

NOTE: Existence of following three items (5, 6 & 7) depends on activating option 4.

5- Panel Logo: Upload your custom logo for off-canvas panel. Recommended size: 80×80 pixel.

6- Your/Site name: Enter your site or your name for showing after logo.

7- Biography: Enter your biography or your site description here. Your site tagline is default value. Find site tagline in Settings → General.

8- Show Search Icon? You can show search icon in this panel.

9- Footer Help Text: Enter your contact info and personal tips/helps in this field.

10- Show Social Icons Panel Footer: Show your social networks link in panel’s footer.

11- Social Networks in Footer: Select and sort your social networks link here. Check them to select and change their place by drag and drop. For customizing your social networks, go to Better Studio → Social Count.

Now you are done and Publisher Off-Canvas menu is totally customized for you. Final result is like below image.

Off-Canvas menu items in PublisherAs mentioned in above image, the menu in off-canvas is “Main menu”. Read more about managing menus position in Publisher.

Off-canvas panel hides in viewports with resolution below 701px. Instead of that, responsive menu of Mobile Header will be shown.