The Turbo theme includes a highly customizable Header feature. It appears on every page to promote your company's brand and provide helpful links, tools, and more.
Jump to:
Customize Header Settings
In the theme editor sidebar (Customize), click the Header section to customize general settings for the feature.
Announcement Bar
Enable an Announcement bar by adding Text to the provided field. This bar will appear as a banner at the top of the header. It's a great way to promote discount codes, sales, or important information to your customers. The text area includes options to bold, italicize, and add a link to your text.
Top Bar
The Top Bar is positioned between the Announcement Bar and the main header content.
Social icons
Display icons connected with your social media accounts by enabling Show social media header icons. Configure the URLs for these icons in the Social media portion of the Theme settings.
Phone number
Include your Phone number by completing the provided field. This displays the number and provides a link for customers to automatically dial the number from mobile devices.
Menu
Click Select menu to connect a menu (assembled in the Navigation admin). This is distinct from the two menu options available in the lower header area. Avoid tiered menus for this area, as dropdowns won't appear and are best suited for the Main menu and Secondary menu header features.
Cart
Include a Cart or Bag icon by enabling Show cart and selecting an option from the Cart icon dropdown.
Language selector
Enable Show language selector to include a Language selector dropdown for customers to select their preferred language.
Country selector
Activate Show country selector to include a Country selector dropdown for customers to select their region and currency.
Logos
Turbo offers several options for the header Logo: the Main logo, the Secondary logo over content, and the Mobile logo.
Main logo
Click Select Image to connect a logo file for the header. Use 400 x 200px or similar dimensions for the best results.
Use the Logo display width range finder to control the maximum width for the logo.
Secondary logo over content
Upload an alternate image with inverted colors for the Secondary logo over content.
This logo appears whenever the header overlaps a banner image. It's a great option if your main logo is a darker color, or if all of the banner images on your site have a dark color.
Mobile logo
Add a separate, more mobile-friendly image for your Mobile logo by clicking Select Image. This will replace the main logo for mobile devices.
Menus
Connect one or two menus by clicking Select menu for the Main Menu and/or Secondary Menu.
Use both to have two separate menus on both sides of the header.
Vertical menus
Activate Enable vertical menus to disable the default horizontal dropdown layout to display vertically instead.
Click or hover to open
Enable Open dropdowns on click instead of hover to reveal the dropdown menus when customers hover their cursor over the menu. Leave this disabled to have the dropdowns open only by cursor selection.
Search
Enable the Search field for the header by activating Show search.
Learn about Turbo's predictive search
Layout
Use the Layout settings to configure the positioning for your logo and menu.
Enable the Fixed (sticky) header to have the header will drop-down and stay fixed when scrolling down the page.
Logo position
Within the Logo position setting, you can choose whether you'd like your logo to appear on the Left, or in the Center. This setting applies when menu position has been set to Inline with logo.
Logo alignment
Within the Logo alignment setting, you can choose whether you'd like your logo to appear on the Left, or in the Center. This setting applies when menu position has been set to Under logo.
Menu position
Within the Menu position setting, you can choose whether you'd like your menu to appear Inline with logo or Under logo.
Menu alignment
Within the Menu alignment setting, you can choose whether you'd like your menu to be Left-aligned, Center-aligned, or Right-aligned.