✨Header

Configure the header section

Select customize the theme. Click on the top dropdown menu to select the home page template.

Click on the customize theme.

From the side menu, select the header.

Configure the "Header" in the setting on the right side with the following settings.

Navigation type	Select the preferred header from the drop-down menu: Hamburger menu. Full-width menu.
Navigation	Open by Choose from click or hover to open the menus. Show bottom border Select/deselect this checkbox to show the bottom border of the header. Its color can be managed from Theme settings>Global color scheme>Header>Divider. Bottom border opacity Adjust this slider to change the opacity of the bottom border. Enable sticky header Select/deselect to show/hide the sticky header. This sticky header appears when users scroll the page from bottom to top. Sticky header type Select from the following options: -On scroll up: This setting makes the header sticky when users scroll up the page from the bottom. -Always: This setting keeps the header permanently sticky as the page is scrolled. Enable icon background Select this checkbox to show the background color of the icons. This background color can be changed from the theme settings> global color scheme> Icon background.
LOGO	Image Select any image to appear as the store logo. Custom logo width Adjust the slider to customize the logo width from 50px to 250px. Logo position Adjust the logo position to the left or center of the page. (Note: This position shows on desktop only.)
TRANSPARENT HEADER	(Note: Add a section on the first position that allows a transparent header such as a slideshow or split slideshow.) Alternate logo Select any image to appear as the store logo with a transparent header. Enable transparency(desktop) Select/deselect this checkbox to show a transparent header on the desktop. Note: This works on the home page only. Enable transparency(mobile) Select/deselect this checkbox to show a transparent header on the mobile. Note: This works on the home page only. Enable background blur Select/deselect to enable/disable the background blur. (Note: This will work on desktop only; for background blur to work, the header should be transparent. Also,this works on the home page only.) Show header background in container Select this checkbox to show header in the smaller container in case of transparent header. Text and icons color Choose a color for the icons in the transparent header. Background color Choose a background color for the transparent header. Opacity Adjust the transparent header's background opacity from 0% to 50%.
Navigation	Menu Select menus from the backend default navigation list of Shopify. It will appear in the Header as the menu. For more details, refer to the Shopify menus.
Desktop navigation	Only applicable to the full-width menu. Menu alignment Adjust the menu to the left, center or right side of the Header. Desktop font size Adjust the range bar to select the font size between 12-18px. Show desktop font bold Select this checkbox to make menu fonts bold.
Font family	Desktop menu Choose from the heading or body font to determine the fonts for the first and second level menus on the desktop view. Desktop submenu Choose from the heading or body font to determine the fonts for third-level menus on the desktop view. Mobile menu Choose from the heading or body font to determine the fonts for the first and second level menus on the view. Mobile submenu Choose from the heading or body font to determine the fonts for third-level menus on the mobile view.
Search	Enable/disable the search checkbox to show/hide the search icon inside the Header.
Cart	Show icon Enable/disable the checkbox to show/hide the cart icon inside the Header.
HAMBURGER MENU	Enable blur background Select/deselect this checkbox to show/hide the blurred background in hamburger menus. Show social media icons Select/deselect this checkbox to show/hide the social media icons. Social media icons position Select from the top and bottom positions to show the icons in the hamburger header style. (Note: It works on desktop only.)

Mega menu

1. Add the mega menu block.

2. Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.

3. You will be connected to this menu by typing the same name into the mega menu created through the theme editor.

Menu label	Click on the ‘Mega menu’ block and type the same name of the first level menu product to add it into a mega menu. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field.
Content 1-4	Image Choose an image to display in the mega menu. Heading Add a descriptive caption to the image in the mega menu. Link Include a link to the image in the mega menu.