Header
In this section, you can configure the Mega menu according to your needs: choose Type, Colorize style, menus for Vertical and Horizontal view, and add content blocks.
Sections -> Header
Video manual list
Header Type
In this section, you can choose the header type. There are 7 header types:
Colorize style
Here you can choose one of the proposed Colorize styles. The theme includes 4 styles:
Transparent background
Here you can decide whether to apply transparency to the Header.
Please note, this option works for the desktop only. The transparent header background will be disabled on mobile by default.
In the dropdown list choose if to show it as “Transparent” or “Transparent and colorize on hover”. These settings will be applied only to the Home page. The Header will have an additional background on all other pages. The background of the Header can be changed by selecting its Colorize style (read the details above) or by adding the dynamic block “Colorize”. How to configure colors, especially for the Header, you can read here. If you want to deactivate the option, select “Disable”.
Centered logo on mobile
Enable an option if you want the Logo to be displayed in the center on mobile.
Please note, you should check if the icons do not overlap the Logo on mobile view. Centering doesn't check the position of the icons.
Top line height (only desktop)
In order to change the top line height for the desktop, use the scale from 0 to 200 px, where 0 is an auto-size.
We changed the line height to 100 px in our example, and this is what we have got:
Horizontal padding of items
In the “Horizontal padding of items” scale you may decide the distance between the first-level Menu items in the Header. You can use the scale from 0 to 30 px to change the paddings:
Main Menu
Select menu
In this section, you can select a menu, that will be used in the header. This menu needs to be created in your Shopify Admin -> Navigation first and then it can be selected, changed, or edited. How to create such a menu you can read here.
This is what the main menu looks like in your Shella theme:
And this is how the main menu looks like in your Shopify Admin:
Show arrows on first levels
If you enable this option, the arrows will be shown on the first levels of the main menu:
Show underline on item hover
If you enable this option, the text of the menu item will be underlined when the mouse cursor hovers over the name of the menu item in the main menu.
Vertical Menu
Select vertical menu
A vertical menu is available for the header type # 5 and type # 7 only. In this section, you can select a menu, that will be used in the vertical menu. This menu needs to be created in your Shopify Admin -> Navigation first and then it can be selected, changed, or edited. How to create such a menu you can read here.
Fixed vertical menu on home page
If you choose this option, you need to add the 'Space for vertical menu' block in the 'Builder' section for the vertical menu to have its own space. To do so choose the Home page, then go to Builder. Otherwise, the menu will be over the other content on the home page.
1. Add “Space for vertical menu”:
Once you click on “Space for vertical menu” a new block will appear, where you will need to select the menu. Once you select the menu the name of this block will be automatically renamed from “Space for vertical menu” to the name of the menu you select. Make sure, that this block is on the very top, over all other blocks in the content section. It can be dragged when clicking on the Shopify default button and reordered to the needed place.
2. Fixed vertical menu on the home page
If you want your vertical menu to be displayed as a fixed menu without a dropdown list, you can enable this option. Make sure that you have added the “Space for vertical menu” first:
Content
Top line content
This option is available for the header type # 5, type # 6, and type # 7 only. Here you can add some additional information in the top-line content of the header. Simply select the page with the information you need. In the Shella theme, there are some default pages, which you can edit with your information.
This is where you can select them in the Shella theme:
And this is where you can edit them in your Shopify Admin-> Online Store -> Pages. Then click on the page and edit it with your information:
More information about how to add and edit pages you can find here.
Country/Region Selector
To display the currency drop-down in the Header, activate the option “Enable country/region selector”. The selector will be available to show if you configure payment options in your Shopify Admin -> Settings -> Payments.
If your store requires displaying the country using the currency, tick the “Show country name” checkbox. Increase the size of the selector to fit the country name and its currency using the “Select maximum width” scale from 0 to 300 pixels. Set the width parameters of the currency drop-down you need.
Sticky Header
Sticky state
Here you can choose which version (desktop, mobile, both, or none) the header should be sticky when scrolling down the page. There are four options that you can choose from: “Desktop and mobile” (the header remains sticky both in the desktop and mobile version), “Only desktop” (the header remains sticky in the desktop version only), “Only mobile” (the header remains sticky in the mobile version only), and “Disable”. If you choose “Disable” the header will not be sticky when scrolling down the page.
Sticky type (Desktop)
You can also choose the type of sticky header for the desktop version. There are 2 of them: “Wide”, where the whole header with all information lines and menus will be shown, and “Slim”, where only the menu line will be displayed.
Slim sticky header:
Wide sticky header:
Hide sticks header when scrolling down
This option enables you to hide a sticky header while scrolling down to the bottom of a page. However, it will be displayed navigating to the top of a page.
The sticky header opacity can be changed in the theme settings. Read details here.
Last updated
