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:
  1. 1.
    Hamburger menu.
  2. 2.
    Full-width menu.
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.
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.)
(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%.
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 or the center 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.
Enable/disable the search checkbox to show/hide the search icon inside the Header.
Show icon Enable/disable the checkbox to show/hide the cart icon inside the Header.
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. 1.
    Add the mega menu block.
  2. 2.
    Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.
  3. 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.