The header and navigation section is a permanent section which is visible on every page above all other content and allows you to have full control over many settings such as the header scroll behaviour, SVG logo, position and styling for the logo and menu items in the header, utility icons and also to include visually pleasing menus with a promotional banner and highlighted list of products.
Header
Transparent header
You could use both Overlay header over home page and Overlay header over collection pages settings to display a transparent header over the home page and collection pages.
Transparent header over homepage
Header with background color over homepage
Header layouts
Logo center, menu center
Logo left, menu left
Logo center, menu left
Scroll behaviour
In Taiga, by using the Header sticky behaviour setting, you can select how the header scroll should behave.
Three options are available:
- None – the header will not move. It will remain in the default position even if you scroll down the page;
- Fixed – the header will remain in view-port, even if you scroll down the page;
- Show on scroll up – the header will disappear when you scroll downwards, but when you scroll upwards, the header reappears;
Navigation drawer
The navigation drawer slides in from the left. It contains the navigation for your store.
In order to build your own custom navigation, there are a few section settings you should put focus on:
- Primary menu: main navigation drawer menu. It supports three hierarchy level. Refer to this guide to create a Navigation menu in Shopify.
- Secondary menu: showed on navigation drawer below main menu. It supports one hierarchy level.
Configure extra content in the header section
In order to fully customize your customer's navigation flow, Taiga theme has introduced the possibility to add promotional banners or highlighted products within your navigation drawer.
All of this is possible through the use of section blocks. Refer to this guide to learn more about section blocks.
In this section, there are three different types of blocks:
-
Menu banner: it is used primarily for an advertising purpose to publicize a single product, collection or page. You can easily select an image, image width for desktop and mobile view, a link, add your heading along with its position within the banner;
-
Menu collection: with this block, you can manually select a list of products you want to highlight;
- Menu divider: used to add a graphic divider between other blocks;
These blocks share a common setting, which is mandatory:
You have to fill the Parent menu item title block setting with the first level menu item name that should contain the block itself. The setting is case-sensitive, so you have to enter the menu item name as it is in the Primary menu navigation.