Topics covered in this section
Off Canvas Overview
An off-canvas menu is crucial for website usability as it optimizes screen real estate on smaller devices while providing easy access to navigation options.
Hiding menu items off-screen ensures a clutter-free interface, enhances mobile responsiveness, and improves user experience by providing seamless access to essential navigation elements without overwhelming users.
To make an off-canvas Header and Footer for your site, go to Main Menu > Website > Headers & Footers
Global Content
Off-canvas areas are located with other Global Content. These are sections of your website that you want to appear across all your pages. The most common of those sections are headers and footers.
Groups
An easy way to organize your global content is making a group. Make a new group by clicking New Group on the top right-hand side of your screen.
A new empty group will appear at the top of your list, click into the text box and rename your group.
If you are making your group after you have made your global content, you can move those elements into your new group by dragging and dropping them into the group box.
New Global Content
Click New Global Content.
Give your global content a name and min and max for the screen size. When finished, click Create Global Content
Choose a layout from an existing piece of global content, an off-canvas menu from a framework, or start from a blank layout.
Adding content to your Off Canvas
Add content to our header. This process is the same as in Pages. Add the Main Navigation component created in the Site Flow Article.
Drag and drop a navigation flow item found under the Navigation dropdown. For this example, we used the Off-Canvas Navigation flow item.
Choose the Off Canvas Navigation from the dropdown.
Click Publish Global Content. Your header is now ready to be used on your master page.
Related Resources
- Publishing Your Page
- SEO What Is It and How to Use It
- Hover States on Buttons, Made Simple