Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Setting up the Header
The Turbo theme includes a highly customizable 'Header' section. The Header includes many built-in settings, including different layout options for your main menu and logo positioning.
Customizable Mega menus can be enabled in the Header as well. For more information on configuring Turbo's Mega menu feature, check out this article.
In order to set up the Header, click into Customize (your Theme Editor) > Sections > Header.
Header Settings
Announcement Bar
Here you can enable the 'Announcement bar'. 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
A 'Top bar' can be enabled which will sit above your 'Main Menu' and below your 'Announcement Bar' if you have that enabled. Within the Top Bar, you can choose to add the following options:
- Social media header icons
- Phone number
- Top Bar menu
- Enable the 'Cart' and choose whether you'd like it to display as a 'Bag' or 'Cart' icon
Note: If you have the Currency Converter and Customer Accounts enabled, they will also show up here.
Logos
The Turbo theme allows for you to upload three logo options. One main logo, a secondary logo over content, and a mobile logo. You can also adjust the logo display width on a slider that can go up to 205px.
If you have just the 'Main logo' uploaded, this will show across all pages in all views:
If you have the 'Secondary logo over content' uploaded, this logo will then appear in any instances where the header overlays a banner image. It's a great option if your main logo is a darker color, but all of the banner images on your site have a dark color as well. The 'Main Logo' would then appear on pages that do not have the header over a banner image:
If you have the 'Mobile logo' uploaded, this will then show up on mobile devices:
Menus
In the Header, you have the option to enable a 'Main Menu' and a 'Secondary Menu'. You can then configure these menus with the layout settings. Using the 'Secondary Menu' is a great way to split up your menus if you're looking to have the Logo in the center between the two.
You can also choose to 'Enable Vertical Menus' in your menu settings. By default, drop-downs in the Turbo theme have a horizontal layout, but if you enable this setting, it will change them to display vertically:
Note: To use Turbo's Mega Menu feature and add custom Mega Menus to your header, please view our article here for instructions and a video guide setup!
Search
In the Header, you can choose to enable the 'Search box'. You can configure the specifics of your Search within Theme Settings > Search. Your 'Search results' can be set to 'Products' or 'Everything'. You can also decide on your 'Pagination type' (read more about pagination type here), and choose to enable Turbo's 'Predictive search' feature (read more about predictive search here).
On desktop view, the Search input will show up as a search box. On mobile, the search box gets minimized to a magnifying glass which users can then click on:
Layout
The layout settings for the Header section allow you to configure the positioning for your logo and menu!
Here, you have the option to enable the 'Fixed (sticky) header'. This will apply for both desktop and mobile. If you enable the 'fixed (sticky) header' option, the header will drop-down and stay fixed once you start scrolling down your 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:
Logo Top Padding
This setting determines the area above your logo. If you find that your logo is small and not naturally inline with your menu, you can add some padding above the logo to nudge it's position a bit lower.
Main menu top padding
This setting determines the area above your main menu/navigation. If your logo is fairly tall, you may want to push down your menu a bit to be centred with the logo.
Examples
-
Demo Shop Examples
Here's how we set up the 'Header' in each of our demo shops for Turbo!
-
Portland
Settings
Announcement barText - added
Top barShow social media header icons - enabled
Phone number
Top bar menu
Cart icon - bag
Show cart - enabled
LogosLogo display width - 160px
Logo
Mobile logo
MenusMain menu
Secondary menu
Search
Show search - enabled
Layout
Fixed ('sticky') header - enabled
Logo position - center
Logo alignment - center
Menu position - inline with logo
Menu alignment - left
Logo top padding - 6px
Main menu top padding - 12px
-
Seoul
Settings
Top barShow social media header icons - enabled
Phone number
Cart icon - cart
Show cart - enabled
LogosLogo display width - 130px
Logo
MenusMain menu
SearchShow search - enabled
LayoutFixed ('sticky') header - enabled
Logo position - left
Logo alignment - left
Menu position - inline with logo
Menu alignment - center
Logo top padding - 8px
Main menu top padding - 12px
-
Florence
Settings
Announcement barText - added
Top barShow social media header icons - enabled
Phone number
Top bar menu
Cart icon - bag
Show cart - enabled
LogosLogo display width - 200px
Logo
Mobile logo
MenusMain menu
Secondary menu
SearchShow search - enabled
LayoutFixed ('sticky') header - enabled
Logo position - center
Logo alignment - center
Menu position - inline with logo
Menu alignment - left
Logo top padding - 14px
Main menu top padding - 8px
-
Chicago
Settings
Top barShow social media header icons - enabled
Phone number
Cart icon - cart
Show cart - enabled
LogosLogo
Mobile logo
MenusMain menu
SearchShow search - enabled
LayoutFixed ('sticky') header - enabled
Logo position - left
Logo alignment - center
Menu position - inline with logo
Menu alignment - right
Logo top padding - 5px
Main menu top padding - 10px
-
Dubai
Settings
Announcement barText - added
Top barShow social media header icons - enabled
Cart icon - bag
Show cart - enabled
LogosLogo display width - 120px
Logo
Mobile logo
MenusMain menu
SearchShow search - enabled
LayoutFixed ('sticky') header - enabled
Logo position - center
Logo alignment - center
Menu position - under logo
Menu alignment - center
Logo top padding - 10px
Main menu top padding - 10px
-
-
Additional Examples
Settings
Announcement barText - added
Top barShow social media header icons - enabled
Cart icon - bag
Show cart - enabled
LogosLogo display width - 205px
MenusMain menu
LayoutFixed ('sticky') header - enabled
Logo position - center
Logo alignment - center
Menu position - under logo
Menu alignment - center
Logo top padding - 16px
Main menu top padding - 6px
Mobile Layout
When the 'header' is viewed on a mobile device, the 'main menu' will be accessible through a 'hamburger menu' button, and all of the menu links will stack vertically with any necessary drop-down arrows on the right.
The 'currency converter' will sit at the end of the menu - also accessible through the 'hamburger menu'.
The 'search box' will turn into a 'search icon'. When clicked, a search input will appear below where customers can enter their search query!
The 'announcement bar' will remain above the menu, logo, search, and cart icon.
