Overview
The header area consists of the logo, sublogo, and navigation menu. In Vsble’s V2 templates, you have various customization options to adjust the header layout, styling, and navigation appearance.
While some settings can be customized separately for desktop view, others are applied globally across desktop and mobile to ensure a consistent design and avoid confusion. Below is a breakdown of what you can customize separately for desktop and which settings remain the same across all devices.
Settings That Can Be Customized Separately for Desktop View
The following options allow you to customize the header exclusively for the desktop version of your website:
Header Width – Choose between full window width or limited by content width.
Navigation Display Mode –
Classic Mode – The navigation menu displays all pages as standard text links.
Burger Mode – The navigation is hidden behind a menu icon, similar to a mobile menu layout.
Header Layout – Align the navigation centered, left, or right.
Header Padding – Adjust the top and bottom padding to modify spacing around the header.
Navigation Links Capitalization – Choose from lowercase, Uppercase, ALL CAPS, or Initial Caps.
Navigation Font Styling – Customize font size, color, and weight for navigation links.
Navigation Padding – Adjust top and bottom padding for navigation links.
Settings That Apply Globally to Desktop & Mobile
The following settings are applied consistently across all devices to maintain branding consistency and user experience.
Header Color – The selected color applies to both desktop and mobile to ensure uniform branding.
Header Opacity – Controls how transparent the header appears when scrolling, allowing content to be visible behind it (if the header is set to scrolling mode).
Header Position –
Fixed Header – The header stays visible at the top of the page while scrolling.
Scrolling Header – The header moves along with the page as the user scrolls.
Why Are Some Settings Global?
Certain elements, like header color, opacity, and position, are kept consistent across desktop and mobile to ensure a seamless user experience and branding. This prevents variations that could disrupt your website’s design when switching between devices.
By customizing these settings, you can create a professional, user-friendly navigation experience while maintaining a visually cohesive website. 🚀