The header area is one of the most important parts of your website. It’s where your logo and navigation menu are located, serving as the first point of interaction for visitors. Here's a step-by-step guide to customizing your header using Vsble's tools. This tutorial applies to V2 templates. Version 1 templates, have more limited set of settings, but will be updated toon to Version 2.
What is the Header Area?
The header is the top portion of your website, containing the logo and navigation menu. It can be customized to suit your website’s branding and functionality.
Customizing the Header on Desktop
Access Header Settings:
Click on Customization and select the Header section.
Header Position: Fixed or Scrolling:
Fixed Header: Stays visible when users scroll down the website, ensuring navigation is always accessible.
Scrolling Header: Scrolls together with the website content, disappearing as users scroll down.
Logo and Navigation Layout:
Choose the alignment of the logo and navigation: Left, Right, or Center.
Padding Adjustments:
Customize the top and bottom padding of the header for precise spacing.
Header Colors and Transparency:
Set any color for the entire header area.
Adjust the transparency to make the header semi-transparent. This is especially useful for fixed headers, allowing visitors to see scrolling content behind it.
Navigation Capitalization:
Choose between keeping the original text capitalization or quickly switching to a different capitalization style like ALL CAPS, Upper Case, lower case.
Navigation Font and Styling:
Customize the font, size, color, and thickness of the navigation menu text.
Adjust the top and bottom padding of the navigation menu for better spacing.
Customizing the Header on Mobile
Access Mobile Header Settings:
Click on the Mobile tab, then select the Header section.
Mobile Header Layout:
Align the logo and navigation menu to the Left or Right.
Padding Adjustments:
Adjust the top and bottom padding to ensure the header looks clean and professional on mobile devices.
Color and Transparency Settings:
The color and transparency settings apply across all devices for consistent branding. Changing this for one device will affect all devices to maintain uniformity.
Customize the Mobile Menu:
Switch between a classic burger-style menu icon or a written menu option:
For the written menu option, adjust the font, size, color, and thickness for a unique look.
If keeping the burger icon, you can customize its color to match your branding.
Why Consistent Branding Across Devices is Important
The header color and transparency settings are applied uniformly across all devices to ensure a cohesive user experience. Consistent branding helps avoid confusion and creates a professional look for your website.
FAQs About Header Customization
Q: Can I use different colors for mobile and desktop headers?
A: No, the color and transparency settings apply across all devices to maintain consistent branding.
Q: What is the benefit of a fixed header?
A: A fixed header keeps your navigation visible as users scroll, ensuring easy access to important links and improving user experience.
Q: Can I change the size of the navigation menu?
A: Yes, you can adjust the font size, color, thickness, and padding of the navigation menu for both desktop and mobile.
Q: How do I change the look of the burger-style menu?
A: You can switch the burger icon to a written menu and fully customize its font, size, color, and thickness. If you keep the classic burger style, you can change its color to match your website.
Final Notes
With Vsble’s flexible header customization options, you can create a header that aligns perfectly with your branding and provides a seamless experience across all devices. Experiment with the settings to find the look that works best for your website.