Complete Guide to Blocksy Theme Mobile Header: Off Canvas Area and Menu Settings Explained

exist WordPress In the theme.Blocksy Flexible, lightweight and highly customizable. In mobile design, Blocksy's Mobile Header has an excellent performance, with a clearly structured interface, support for Off Canvas slide-out menus, diversified element management, and a variety of visual control capabilities. This article introduces how to set up Mobile Header, how to apply Off Canvas area, and the details of advanced features.

I. Enter the mobile header settings

To start setting up the mobile header:

• go into WordPress Backend, open Appearance > Customize;
• Go to the Header area;
• Switch to Tablet / Mobile View at the bottom;
• The default display is a flat view, which is easier to maneuver in a relatively wide interface.

The overall structure is consistent with the desktop side and still uses a three-line layout.

Second, mobile available elements and layout logic

Mobile pages are optimized in terms of element configuration. For example, some components that are commonly used on desktop but don't make sense for small screens are hidden or replaced. One of the most crucial changes is introduced:

• Trigger(Trigger) element: expands the Off Canvas area when clicked and is the navigation entry point.

For Blocksy Premium users, menus can also be inserted directly into the header, skipping the trigger structure and improving operational efficiency.

III. Off Canvas Area Functions in Detail

Off Canvas is the area that slides out from the edge of the screen when the menu button is clicked to display the menu with customized content.

Supported components include:

• HTML blocs
• Social Icons
• Customized buttons
• Mobile Menu

The setup includes:

• Display mode: support full screen mask or side slide display;
• Content alignment: optional top, center or bottom;
• Style Settings: You can adjust parameters such as color, gradient or pattern background.

The content is vertically arranged to fit the mobile browsing style.

IV. Mobile Menu Configuration (Mobile Menu)

The menu can either be placed in the Off Canvas area or inserted directly into the header.

Provide styles:

• Regular Style;

• Separation styles (with borders and white space);

Support collapsed submenu function, initially the subitems are hidden, and then expanded when the parent item is clicked. It can also be set to be always expanded.

Blocksy Premium offers a streamlined menu feature that can be inserted into the header row, suitable for displaying a small number of core page entries.

V. Trigger (trigger button) settings

Triggers are switches that control the display of the Off Canvas area and must be added to the MobilefooterA certain line.

Its features include:

• Three icon choices;
• Customize the button style;
• Whether or not the label text is displayed;
• Font and color style adjustment;

is one of the core interaction components in mobile pages.

VI. Desktop Off Canvas function (Premium)

The advanced version also supports calling Off Canvas areas on the desktop. The layout logic is the same as mobile, but adapted to larger screen displays.

Can place auxiliarymenu, social links or information modules for neat page layouts.

VII. Transparent and sticky header settings

Mobile headers have separate transparency and sticky controls:

• sticky header: Fixed at the top when the page scrolls;
• Transparent header: Suitable for situations where the top of the page has an image or video background;

These two features are not associated with the desktop and can be enabled independently.

summarize

Blocksy The mobile header design is clearly structured, flexible and easy to adjust, which can be adapted to the needs of mobile display in various scenarios. Whether building a simple navigation bar or an advanced slide-out menu, Blocksy provides enough modules and configuration options to lay a solid foundation for mobile site layout.

If you're building a mobile site navigation, try Blocksy's mobile header module for a clean, functional and beautiful front-end.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off