Header nav - drawer
*You should only activate/use one "Header with Navigation" that you want. Don't use redundant headers, as they may not optimize performance.
The header settings make it possible for you to fully customize the header of the theme. Upload your logo, mega menu, search bar etc.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
From the side menu, select Header nav - drawer
. Configure the Header in the setting on the side with the following settings.
Section width
Select the section width from the dropdown menu:
Page width
Customized width
Customize width
Determines the width of the section when you choose "Customized width" option. Can be from 1000px to 2000px, increasing arithmetically of 50px (pixel).
Show separator line
Displays a line at the bottom to visually separate this section from the other sections.
Sticky header
Header shows on the screen:
None
On scroll up
Always
Color scheme
Select a color scheme to set the text and background colors for the section
Text size
The size of the menu lv-1 text:
XX-Small
X-Small
Small
Medium
Large
X-Large
XX-Large
XXX-Large
Text transform
Select the font style transform of the menu lv-1:
Lowercase
Capitalize
Uppercase
Transparent header
Enable transparent header on homepage
Enable/disable checkbox (Use the same dimensions as main logo)
Logo image
Uses this logo on the pages which transparent header is enabled. (If no logo is set here it will use the default logo image instead)
Text (Color)
Set the color for the text (Use text color for transparent header content)
Background
Set the background color for this section (Use background color for transparent header content)
Background opacity
Determines the saturation for header. Can be from 0% to 100%, in 1% arithmetic increments
Background blur
Determines the saturation for sticky header. Can be from 0px to 20px, in 1px arithmetic increments
Logo
Logo image
The logo for your store. Use the logo selector option to set up an image to use as a logo inside the Header. The recommended image dimensions are 130x30px (pixels).
Custom logo width
Set a size for the logo image between 50px and 300px (pixels).
Desktop logo position
Select the preferred logo position on the header from the dropdown menu:
Top left
Top center
Middle left
Middle center
Middle right
Desktop block alignment
Aligns the logo within the block:
Left - Aligns the logo to the left of the block.
Center - Aligns the logo to the center of the block.
Right - Aligns the logo to the right of the block.
Navigation
Menu
Desktop menu alignment
Select the desktop menu alignment on the header from the dropdown menu:
Left
Center
Right
(Menu alignment is automatically aligned to left on mobile and when the logo position option of "Middle center" is selected)
Grid between
Determine the gap between menu lv-1 in the section.
Text transform
Select the font style transform of the menu lv-2 and menu lv-3:
Lowercase
Capitalize
Uppercase
Hover effect
Select the hover effect link from the dropdown menu:
Line
Dot
Border
Function group
Background 'Free shipping'
Set the background color for button 'Free shipping'
Custom menu
Set up an custom menu (Displays only top-level menu items)
Icon style
Select the icon style on the header from the dropdown menu:
Default (icon)
Default (text)
Special
Classic
Modern
Special
Classy
Fashion
Enable account 'Desktop'
Enable/disable checkbox
Enable cart 'Desktop'
Enable/disable checkbox
Enable cart 'Desktop/Mobile'
Enable/disable checkbox
Enable wishlist 'Desktop'
Enable/disable checkbox
Country/region selector 'Desktop'
Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Language selector 'Desktop'
Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Desktop function group alignment
Align the function group in the block with the Desktop screen:
Left
Center
Right
Enable search 'Mobile'
Enable/disable checkbox
Enable account 'Mobile'
Enable/disable checkbox
Enable cart 'Mobile'
Enable/disable checkbox
Enable wishlist 'Mobile'
Enable/disable checkbox
Country/region selector 'Mobile'
Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Language selector 'Mobile'
Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Mobile layout
Mobile logo position
Select the preferred mobile logo position on the header from the dropdown menu:
Center
Left
Section padding
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).