The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.
The header at the top of your site sets the tone for your content and plays a big role in how visitors navigate and interact with your site.
In the Brine family, the header is divided into two sections: Top and Bottom. Within those sections, you can add the following elements to the left, center, or right:
- Site title or logo (“branding”)
- Tag line
- Navigation links
- Social icons
- Shopping cart
- Sign In / My Account link
- Search bar
Tip: To experiment on your own, open the Style Editor and use the Header: Layout tweaks to change how it displays.
Set up the header
Use the Style Editor to set up your header:
- From the Home Menu, click Design, then Style Editor.
- Scroll to the Header: Layout section to choose where each element displays, or to hide any of them.
For example, you could:
- Choose Branding Position: Top Center to display your site title or logo in the middle of the top header.
- Change that to Branding Position: Bottom Center to move it to the bottom header.
- Choose Search Position: Hide to hide the search bar from your header.
Once you've added your elements, use the Style Editor section for each element to style it further. For example, scroll to the Header: Tag Line section to choose the font and color of your tag line.
- For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
- Some tweaks won't display until the elements they affect are added to your site. Learn more.
- If you have multiple elements in the same area (for example, Bottom Center), choose whether they display horizontally or vertically.
Style the background
The top half of your header has its own background color. Use the Background tweak in the Header: Top section of the Style Editor to adjust the color.
The bottom half either displays a background color or image:
- If the page has a banner, this displays as a background image for the bottom header.
- If the page doesn't have a banner, the bottom header is the same color as your main site. Set this with the Color tweak in the Main section of the Style Editor.
- If you don't see the top half of your header, add elements to it. If it's empty, it won't appear.
- For elements in the bottom header, set their overlay colors so that they're visible over banner images.
Change the header height
To set the height of the top header, go to the Style Editor and use the Padding tweak in the Header: Top section.
For the bottom header, several options affect the height:
- To add space above the elements, adjust the Padding tweak in the Header: Bottom section of the Style Editor.
- For pages with intro areas, add space above and below the intro (below the elements) by adjusting the Intro Padding tweaks in the Main section. You can also add height to the bottom header on individual pages by adding extra line breaks to the intro.
- For Regular Pages without banners, add a Spacer Block to the top of the page to add space below the elements.
- For Index Pages, adjust the height of the top Index section.
Change the header width
The header elements display at the width of the main content area. You can adjust this by changing the site width and layout.
Banner images display full-bleed. To set their width, choose the Constrained layout.
Stack header elements
Once you’ve added two or more items to the top or bottom header, you can choose whether those items display side by side or stacked. In the Style Editor:
- Go to the Header: Layout section and ensure there are two items in one area (for example, choose Branding Position: Top Left and Tagline Position: Top Left).
- Scroll up to the Header: Top or Header: Bottom section.
- Change the layout from Horizontal to Stacked with the Left Layout, Center Layout, or Right Layout tweaks.
Tip: Navigation links will still display horizontally, but you can stack the Primary Navigation links above the Secondary Navigation links and vice versa.
Add a background image
When you add a banner image or video to a page, it displays behind the bottom half of the header, creating a background image. Choose which header elements display over the banner in the Header: Layout section of the Style Editor.
- Banners are page-specific. To display the same image across your site, add it to each page.
- The top header always displays a solid background color. To ensure your header only has a background image, hide the top header.
- Give header elements unique styles when they appear over banners to help them stay visible.
- Use the intro area to add text, buttons, and other content over the image.
- Increase the height to see more of the image.
- You can add a color filter to all banner images.
- For Index Pages, make the top section a content section with a background image.
- Learn more about banner images in the Brine family.
Set overlay styles
Use (Overlay) tweaks to give elements in the bottom header different styles when they display over background images. For example, you can set them to be black over the background color, but white over page banners.
To do this:
- Go to a page on your site with a banner.
- Open the Style Editor.
- Scroll down to the section for each element in your bottom header (for example, the Header: Search section).
- Use the (Overlay) tweaks to set the color and other styles. Elements will take these styles when displaying over a banner image.
Tip: Only the (Overlay) options will display when you're on a page with a banner. To style elements on pages without banners, exit the Style Editor, go to a page without banners, and re-open the Style Editor. You can also move the element temporarily into the top header to set its non-banner style, then move it back.
Add other content to the header
The Brine family supports a page-specific header area called the "intro." This is a great way to customize individual pages and introduce the page content to your visitors.
The intro is available on all pages except:
- Regular Pages without a page banner. Instead, add content to the page.
- Index Pages. Instead, add content to the top section.
To add content to the intro:
- Hover over the intro area, just above the page content
- Click Edit.
- Add and adjust content with blocks.
Style the content in the Style Editor:
- Use the Overlay Content: Colors section to adjust the colors of body text, headers, links, and lines.
Tip: Intro areas are deleted from demo pages when you click Create. Edit the intro area to add your own content.
On pages with banners, the intro displays over the banner. This is a great way to add text to your banner images.
Use the Intro Padding tweaks to adjust the padding above and below the content in the intro.
The intro follows the same content inset rules as the rest of your site. For example, single-column text will be inset on either side, but image blocks display at the width of the content area.
Hide the header
The header only displays when a site element, such as the site title, is displaying in it. You can set this in the Header: Layout section of the Style Editor:
- To hide the whole header, choose each site element and select Hide.
- To hide the top half of the header, move all site elements to the bottom header or hide them.
- To hide the bottom half of the header, move all site elements to the top header or hide them. You may also want to remove your page banners.
- Your mobile header elements will continue to display unless you style them separately.
- If you sell products, we don't recommend hiding the shopping cart. Learn more.
The header displays site-wide, meaning the same header elements display on every page.
- To create a standalone page that doesn't show the header, add a Cover Page.
- To add extra content to just one page, add it to the intro.
Site title or logo
Your site title or logo (“branding”) tells the world who you are. Clicking the branding leads to your homepage. Once you've added a site title or logo, style it in the Style Editor:
- Use the Branding Position tweak in the Header: Layout section to adjust where the branding displays, or to hide it.
- Use the tweaks in the Header: Branding section to adjust your site title's style options, such as font and color. The Color (Overlay) tweak sets its color on page banners.
- To set the size of your logo, use the Logo Width tweak in the Header: Branding section.
The same logo or site title displays on mobile, but you can give it a different style in the Mobile: Branding section.
Adding a tag line is a great way to reinforce your brand. Tag line tweaks appear in the Style Editor once you've added a tag line to your site:
- Use the Tagline Position tweak in the Header: Layout section to choose where the tag line displays, or to hide it.
- Use the tweaks in the Header: Tag Line section to adjust the font and color of your tag line. The Color (Overlay) tweak adjusts the color of the tag line when it displays over a page banner.
Note: Tag lines don’t display on mobile.
Pages you've added to the Primary Navigation and Secondary Navigation display in the site header as links. Having two navigations gives you more options:
- You can display them in different areas of your header.
- You can give them separate styles.
Tweaks appear in the Style Editor once you've added one or more pages to either navigation.
In the Header section:
- Use the Position tweaks to adjust where the links display or to hide them.
In the Header: Primary Navigation section:
- Adjust the navigation Font and Color.
- Style Folder drop-down menus.
- Use the (Overlay) tweaks to adjust the color when the navigation displays over a page banner.
- Use the Style tweak to affect how the navigation acts on hover (plain, fade, spotlight, or active) or style each navigation link as a Button.
In the Header: Secondary Navigation section:
- Check Inherit Primary Navigation Styles to give the Secondary Navigation the same style as the Primary Navigation.
- Uncheck Inherit Primary Navigation Styles to style it independently. It has the same style options as the Primary Navigation.
- Adjust how the navigation displays on mobile devices.
- In mobile, the Primary Navigation and Secondary Navigation display as a menu overlay. To learn more, visit Brine mobile styles.
- Add drop-down menus to the navigation with folders.
- The footer has an additional navigation.
- If you don't see Navigation tweaks in the Style Editor, ensure you've added pages to your navigation.
Social icons encourage visitors to follow and connect with you. Social icon tweaks appear in the Style Editor once you've connected one or more accounts:
- Use the Social Position tweak in the Header: Layout section to adjust where the icons display, or to hide them.
- Use the tweaks in the Social Icons section to set the icons' size, style, shape, and color.
The shopping cart icon shows customers how many items they’ve added so far, and takes them to checkout when they’re ready to order. In the Brine family, the shopping cart icon:
- Can display as a cart, text, or bag.
- Can be hidden.
- Has separate mobile styles.
In the Header: Layout section:
- Use the Cart Position tweak to choose where the cart displays, or to hide it.
- If you Hide the shopping cart, customers can't access the checkout page. If you have a store on your site, we don't recommend hiding the cart unless you enable Express Checkout.
In the Header: Cart section:
- Adjust the Font and Color of the icon or text. The Color (Overlay) tweak adjusts the color of the cart when it displays over a page banner.
- Style the quantity circle with the Quantity Color and Quantity Text Color.
- Use the Style tweak to style your cart three ways: as a shopping cart, shopping bag, or text.
In the Mobile: Cart section:
- Choose how the cart displays on mobile devices.
In the Site section:
The Icons tweak adjusts the line weight of the shopping cart or shopping bag icons. This tweak affects both desktop and mobile display.
Tip: If your shopping cart isn't displaying:
Sign In / My Account link
After you enable customer accounts, you can adjust the style and position of the Sign In / My Account link.
In the Header: Layout section:
- Use the Customer Accounts Link Position tweak to adjust where the link displays, or to hide it.
In the Header: Customer Accounts Link section:
- Use the Style tweak to display the link as text or an icon.
- Change the Font and Color of the text.
- Change the Color of the icon.
In the Mobile: Customer Accounts Link section:
- Choose how the link displays on mobile devices.
The search bar enables visitors to search your site. When visitors enter a keyword and hit enter, a search page appears with relevant pages below.
In the Header: Layout section of the Style Editor:
- Use the Search Position tweak to adjust where the search bar displays, or to hide it.
In the Header: Search section:
- Adjust the Font and Color of your search bar
- Style it with an underline, as a rectangle, or as just the icon.
- Use (Overlay) tweaks adjust the style when the search bar displays over a page banner.
- Uncheck the Show Placeholder Text tweak to hide the "Search" text.
- Use the Icon Scale tweak to set the size.
In the Mobile: Search Icon section:
- Adjust how the search icon displays on mobile devices.
In the Site section:
- The Icons tweak adjusts the line weight of the search icon. This tweak affects both desktop and mobile display.
Tip: Like any search engine, search results are based on the quality of the content on your site. For best results, add descriptive and accurate titles, descriptions, excerpts, tags, categories, and keyword-rich content across your site.
Set mobile styles
Header elements have their own mobile styles. For each element, go to the Style Editor and scroll down to its mobile styles section. For example, to change how your search icon displays on mobile, go to the Mobile: Search Icon section.
- Use Device View to see what your current mobile settings look like.
- The same logo or site title always displays on mobile, but you can give it a different style.
- Tag lines don’t display on mobile.
- Learn more about your mobile site.
Experiment with the layout to find the perfect arrangement for your site’s header. The examples below show different variations to help inspire you as you design your header.
Tip: Style Editor tweaks are shown in bold. To search for a tweak, open the Style Editor and press Ctrl+F (Command+F on a Mac). We've included the Style Editor section for tweaks that appear more than once.
- Page has a banner image
- Intro Area has a Newsletter Block
- Branding Position: Top Center
- Tagline Position: Top Center
- Center Layout: Stacked
- Primary Nav Position: Top Left
- Secondary Nav Position: Top Right
- Branding Position: Top Left
- Primary Nav Position: Top Center
- Cart Position: Top Right
- Header: Cart > Style: Bag
- Search Position: Bottom Center
- Header: Top > Background (darker blue)
- Main > Color (lighter blue)
- Page has a banner video
- Social Position: Bottom Left
- Branding Position: Bottom Right
- Main: Overlay > Overlay Color
- Tip: The top header doesn't show because it doesn't contain any elements.
- Primary Nav Position: Top Right
- Secondary Nav Position: Top Right
- Header: Secondary Navigation > Style: Button
- Header: Bottom > Right Layout: Horizontal
- Main: Color (gray)
- Site: Border > Color (navy)
- Since there isn't a banner image, the elements in the bottom header overlay the main content area
- Branding Position: Bottom Center
- Primary Nav Position: Bottom Center
- Social Position: Bottom Center
- Header: Bottom > Center Layout: Stacked
- Social > Style: Knockout
- Cart Position: Bottom Left
- Cart Style: Bag
- Search Position: Bottom Right
- Header Search > Style: Icon Only
- The Intro Area has a Button Block ("Shop Now")
- Button Block (Large) > Style: Solid and Alternate Text Color (pink)
- The top header doesn't show because it doesn't contain any elements.
You may find these troubleshooting tips helpful: