Taiga
documentation

Header and navigation

General

The Header section is a general section which is visible on every page and allows you to have full control over many settings such as:

  • Menus used in the main navigation
  • Header layout
  • Header scroll behavior
  • Overlay settings
  • Header logo settings
  • Mega menu items through set

In the header section you can select two menus used in the navigation Primary and Secondary menus. The main menu drawer slides in from the left. It contains the navigation for your store from both menus. 

Primary menu is the main source of navigation. It supports three hierarchy level. Primary menu is also used to populate the header shortcut links from the top level menu items. If the top level menu item has child links or banner content - see below - attached to it, then the click will open the drawer with the corresponding panel in view.

The secondary menu is used to add links to the drawer only. 

Adding dividers in to the drawer menu

You can add dividers in to the drawer menu by using three dashes --- in a the menu item title. The theme code will recognize this as a divider item and will replace the text with an dash in the layout. This is handy when you have long list of elements that you want to group by dividers.

(Refer to this guide to create a Navigation menu in Shopify.)

 

General options

  • Layout: Control the logo and menu position to your liking affects both desktop and mobile
  • Header sticky behavior:  Select how the header behaves when the window is scrolled
  • Amount of shortcut links shown in desktop
  • Use shadow
  • Show functions as buttons or as text

Overlay header

You could use both Overlay header over home page and Overlay header over collection pages settings to respectively use transparent header over home page and collection pages.

You can also enable the overlay functionality in custom set of pages by listing the page handles in Overlay on pages input. Use line change / enter to separate the handles.

When overlay is selected the header text color is selected from the header colors according to the drop down selection: Light or Dark

 

Mega menu 

Philosophy

Taiga theme has a hybrid mega menu solution. With our hybrid menu solution we've built the mega menu in a way that both mobile and desktop user can benefit from in menu content.

We've also taken the menu experience a level higher by introducing more than just banner in to the menu content. Our knowledge in digital commerce also highlights that many users don't visit the online store's homepage. By enabling the merchant

Managing content

Manage mega menu content using the Header section blocks. There are three different block types:

  • Menu banner: used primarily for promotional 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 shared a common setting, which is mandatory: Parent menu item title.

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.

Read more about Mega menu setup.

 

By default the search is enabled and shown as a button in the store header. When user clicks the search button a search panel will open up where the user can input the search term.

The panel also has a place for commonly used search terms that can be set up in Theme settings > Search > Search recommendations. It is a manual list of search terms that are displayed in the order of the setting value. Make sure to have each term on an individual line by using the enter key.

Default search will start to show the predictive search results as the customer starts to type search term in to the search input.