Skip to main content
All CollectionsV2 Template Tips
Header Settings - Mobile View
Header Settings - Mobile View

How to customize the header for the Mobile view in V2 Templates

Updated today

Overview

The header area in the mobile view contains the logo, sublogo, and navigation menu (burger menu). In Vsble, you can customize various elements of the mobile header to ensure a user-friendly and visually appealing experience.

While some settings are specific to mobile, others are global and apply to both desktop and mobile to maintain brand consistency and a cohesive design. Below is a breakdown of what you can customize separately for mobile and which settings remain the same across all devices.

Mobile-Specific Header Customization

These settings allow you to customize the header layout and navigation style exclusively for mobile:

  • Header Layout

    • Logo Right – Burger Left

    • Burger Right – Logo Left

  • Header Padding

    • Adjust the top and bottom padding to control the spacing inside the header.

  • Burger Menu Style

    • Choose between Icon Mode (classic burger icon) or Word Mode ("Menu" written out).

  • Burger Icon Customization (if using Icon Mode)

    • Change the color of the burger icon.

  • Burger Text Customization (if using Word Mode)

    • Adjust the font, font size, color, and weight of the "Menu" text.

Global Header Settings (Applied to Both Mobile & Desktop)

The following settings apply universally to both desktop and mobile:

  • Header Color – The chosen background color applies across all devices to ensure branding consistency.

  • Header Transparency – Determines how transparent the header appears while scrolling.

Why Are Header Color & Transparency Global?

To keep the design recognizable across devices, the header color and transparency settings remain the same for both desktop and mobile. This prevents inconsistencies in branding and ensures that your website maintains a cohesive, professional look no matter where it is viewed.

Why Customize the Mobile Header?

  • Enhances usability – Adjusts navigation for better mobile accessibility.

  • Improves branding – Keeps your website visually consistent across devices.

  • Creates a clean layout – Ensures a clutter-free, easy-to-navigate mobile experience.

With Vsble’s mobile header customization, you can create a seamless, high-quality browsing experience for visitors on any device! 🚀

Did this answer your question?