Mobile Header Builder

Overview

In this tutorial, we walk you through Blocksy’s mobile header system – a powerful set of tools for crafting the perfect mobile experience for your website. 📱

Using the drag-and-drop interface, you’ll configure mobile header elements and the Off Canvas Area – where your mobile menu elements live. The Trigger element is the key: it’s what opens the Off Canvas Area for your visitors, and offers design options like icon choice, size, button styling, and label visibility. All other header elements work the same as their desktop counterparts. The Off Canvas Area itself arranges elements vertically and lets you choose between a side panel or full-screen modal appearance. The Design tab gives you complete control over background colour, backdrop, shadow, and the close button styling. For Blocksy Pro users, the Off Canvas Area is also available on desktop – simply add the Trigger element to a desktop header row and configure it independently.