The Vino theme includes a fully customizable Header section that appears on every page. It highlights your store logo and provides links to navigate through your site.
Customize header settings
In the theme editor sidebar (Customize), click the Header section to customize general settings for this section.
Choose a Color scheme to customize the section’s background and text colors. You can modify your color schemes in Theme settings > Colors.
If the navigation sidebar is enabled, you can adjust its color using the Overlay menu color scheme setting.
By default, Shopify's default main menu is selected for the Navigation. Click it to choose a different menu if needed. Navigation size lets you adjust the font size of the menu links. Enable Capitalize navigation to display the links in uppercase.
Header layout
The theme offers three header layouts you can use:
Logo left, menu left
This layout places the logo on the left, with the menu links positioned next to it, and the search, account, and cart links aligned on the right.
Logo center, menu left
This layout centers the logo, displays the menu links on the left, and shows the search, account, and cart links on the right side of the header.
Logo center, menu collapsed
This layout displays a hamburger menu icon for navigation on the left, places the logo in the center, and shows the search, account, and cart icons on the right. When the hamburger menu is clicked, a sidebar slides in from the left side of the screen, displaying the navigation links.
These header layouts are used on desktop. On mobile, the theme switches to a single layout with the logo on the left and the search, account, cart, and hamburger menu on the right.
The Show mega collections setting adds the collection image to the mega menu. Learn how to set up the mega menu in this guide.
To keep the header visible as customers scroll down the page, enable the Sticky header option.
The Overlay header over home page option positions the header above the homepage’s first image section. To use this feature on collection pages, activate Overlay header over collection. Make sure the Collection header has a collection image enabled for the overlay to function as expected.
Enable search on desktop displays a search link on the right side of the header, while Enable search on mobile shows a search icon on mobile. Clicking either option opens the search bar customers can use to search your store.
Header logo
The header section includes a single block for the logo image. Click the Logo block to customize its settings.
Click Select Image to add a Logo image for your header. The White logo is displayed when the header sits over an image section or when Overlay header is enabled. For best results, choose a white logo that stands out clearly against the background image.
Adjust the logo size with the provided slider for the Desktop logo width (between 100 - 400px) and the Mobile logo width (between 60 - 200px).