The Turbo theme includes a highly customizable Header feature. The Header includes many built-in settings, such as 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.
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.
The Top Bar 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
The Turbo theme allows 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.
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.
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.
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.
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.
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.
Within the Menu position setting, you can choose whether you'd like your menu to appear Inline with logo or Under logo.
Within the Menu alignment setting, you can choose whether you'd like your menu to be left-aligned, center-aligned, or right-aligned.
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.