Header

Last updated 1 month ago

Header

The header is the first section of your site that visitors see. It houses your logo, primary navigation, and key icons (search, account, cart). A well-configured header ensures brand consistency, easy navigation, and smooth user interaction—whether it’s static, sticky on scroll, or transparent over your hero image.

1. Spacing

Top Padding (9) Controls the space above the header content. Increasing this pushes the logo and menu down, creating breathing room.

Bottom Padding (9) Controls the space below the header content. Adjust as needed to balance header height.

2. Color Scheme

Scheme 1 Selects the overall palette used for header background, text, and icons. Schemes are predefined light, dark, or custom color sets.

Mega Menu Selection: Main menu Choose which menu in Shopify’s navigation will display full-width or multi-column dropdowns.
Capitalize First Letter Automatically converts the first character of each menu item to uppercase for consistent styling.

4. Appearance & Layout

Section Width: Fluid Container When set to “Fluid,” the header stretches edge to edge. A “Fixed” container would limit it to a centered column.

Logo Alignment: Align Left & Logo Alignment: Align Center Positions the logo at the left edge of the header. If you change this, remember to adjust the menu’s horizontal position below.

Logo Hover Animation: None Defines any hover effect on the logo. Disabled for transparent headers or set to a fade/move animation when using a solid background.

5. Header Bottom Border

Enable Bottom Border Toggles a thin line beneath the header.
Bottom Border Color: #E2E2E2 Sets the border’s color.
Hide Bottom Border on Homepage Optionally remove the border only on your front page for a cleaner hero display.

Menu Links Font Size: 15 Controls main menu text size.
Menu Links Position (Horizontal): 300 Offsets the entire menu from the left (or right, depending on alignment).
Gap Between Menu Links: -5 Adjusts spacing between individual menu items; negative values bring them closer.

Submenu Links

Custom Colors Enabled Allows submenu text and hover colors to differ from the main menu.
Text Color: #5B5B5B / Hover Color: #1E1E1E
Font Weight: Normal / Font Size: 16
Underline on Hover / Right-move on Hover These effects give visual feedback when a user hovers over a dropdown link.

Background Color: #FFFFFF Sets the panel’s fill color.
Border Radius: 22 Rounds the dropdown corners.
Animation Style: Fade In (or Fade In Down) Determines how the dropdown appears—either a simple fade or a drop-down effect.

8. Sticky & Transparent Headers

Sticky Header

Enable Sticky Header Keeps the header fixed at the top as you scroll.
Always Sticky
Sticky Behavior: Stick on Scroll Up Header hides when scrolling down and reappears when you scroll up.

Transparent Header

Enable on Desktop / Mobile Makes the header background see-through so underlying content shows through.
Transparent Menu Text Color: #FFFFFF Ensures links and icons remain visible over darker backgrounds.
Logo Transparent Width: 100 & Horizontal Position: 0 Adjusts logo size and placement specifically for the transparent state.
Menu Toggle Color (Transparent): #DFDFDF Colors the mobile menu icon when the header is transparent.