Understanding the Mobile Header

Overview

When space is limited, you have to make the most of what’s available. For this reason, the Blocksy mobile header was built to be as compact and effective as possible on mobile devices with tight screen sizes.

Unlike desktop screens, where you have enough space to display all kinds of elements, mobile devices cannot afford this luxury so you will have to be resourceful and selective.

As you’ve already become acquainted with the Customiser, all the relevant options will be found under the General Options -> Header section, in the Mobile/Tablet view. Most of the familiar header elements are all there and we have a new feature available: the Off-Canvas Area. There are also some elements that have been removed as they wouldn’t be useful on mobile devices.

There is a new element that triggers the off-canvas area, essentially doubling our available screen space. Say hello to your little friend, the trigger element 🔫 

Pressing it will unfold the off-canvas area and its contents, which now include a standard mobile menu ( + a customisable one for our premium subscribers), HTML elements, socials, and more. You can customise the look and feel of your off-canvas area using the handy options presented in the Customiser.

Bonus for our Premium subscribers: you can also add the Off-Canvas area for your desktop view; you can now keep things neat and organised while making no compromise on information you make available to your users.

And one more piece of candy: both the sticky and transparent functionality can be turned on or off independently for the desktop and mobile header, letting you customise and differentiate your website on different platforms.

So there you go, the mobile header options available with Blocksy are sweet, relevant and a must-have if you want to stay on top of your per-device game 🙂