Header Settings

How to setup Header in Booster theme

In this article:

1. Accessing header settings
2. Global Header Settings
3. Enable shadow
4. Menu Links 
5. Enable Megamenu 
6. Logo Width & Height
7. Make the Header Stick to the Top 
8. Show Cart (desktop)
9. Background color
10. Link Style
11. Hover Style 
12. Font Size and Font family
13. Cart icon
14. Make the Header transparent
15. Mobile Header settings

---

Accessing header settings

Booster theme offers the ease of customizing the entire header with the help of a variety of distinct options provided. In order to access header settings, click on Sections > Header.

 

Global Header Settings

There are four different types of section layout available for the header in the Booster theme. These layouts include Global default, Boxed, Full Width, and Full-Width Background.

You also have the option to adjust the height of the header and the border radius.

Enable shadow

You can add a small shadow under your header to make it more visually appealing.

Results on with shadow enabled.

 

Menu Links 

With this setting, you can choose different menu links that you want to add to your header. Add or alter according to your store design.  

 

Enable Megamenu

With this Header setting, you get the convenience of making a mega menu for your storefront.
Here is a complete setup article: Megamenu and rich submenu Navigation

Logo Width & Height

Want to adjust the width of your logo? We have provided this setting with the option of doing so. If you feel that your logo is just not fitting in right, modify the size to fit it perfectly well. You can modify the Width and the Height of your logo image.

 

Make the Header Stick to the Top 

You can make the header of your storefront stick to the same position at the top of the screen. You can scroll the rest of the screen, but the header will still be there at the top. Either enable or disable this option according to your desire.

Navigate through the entire website with the header stuck at the top.  

 

Show Cart (desktop)

Background color

Link Style

You also have the option to customize the style of the links in the header section. This allows you to modify the color of the text or elements in the menu section. Additionally, you can change the color of the accent under the active menu elements.

Hover Style 

With this setting, modify the hover style for your menu section. You can pick from 6 varied styles available: Fill(1), Underline(2), Opacity(3), Line through Text(4), Dot Below(5), Dot Above(6).   

Here is how it show on front end.

Font Size and Font family

Modify the size and type of fonts used in the header section to customize its appearance.

Cart icon

With this option in Booster Theme, you can alter the cart icon for your storefront.

Select the icon you like best. There are varied options for the user to choose from. The available options include Bag(1), Cart(2), and Basket(3). Pick one according to what you prefer. 

How it looks on store

Mobile Header settings

This mobile menu setting modifies the position of the logo for its user. You can choose to position it either in the left or center or on the right.  

How it looks to the user on the front end.