Pixel Perfect

Applies only to the Home page and Category Landing Pages.
Assumes the Hero section and background image are already in place.

Set the default header appearance using the Theme panel.

• Go to the Home page
• Open the Theme panel
• Set:
• 6 – Header BG to a dark background color
• 7 – Header Text to a light text color (usually white)
• 10 – Navigation BG if needed, for the menu background
• Do not apply background colors directly to header sections or columns.
• If you want to wrap the logo in a colored background:
• Desktop
• Click the logo
• Use the breadcrumb bar to select IC - LOGO BG
• In the Design panel, apply background color and adjust spacing if needed
• Tablet
• Click the logo
• Use the breadcrumb bar to select C - LOGO
• Apply background color in the Design panel
• Mobile
• Click the logo
• Use the breadcrumb bar to select IC - LOGO
• Apply background color in the Design panel
  

Step 2 – Set Hero Padding

Adjust the top padding of the Hero section to clear the header.

• Click the Hero section
• In the Design panel, set top padding to:
• Desktop: 320px
• Tablet: 150px
• Mobile: 200px
• Adjust further if needed to create clean spacing under the transparent header.
  

Step 3 – Enable the Transparent Header

• Hover over the header until the orange Advanced Header label appears
• Click it to open the settings in the right panel
• Scroll down and enable:
• Overlap 1st section on page
• Set as sticky header
• Change header on scroll
• Set the Background on scroll to match the default header background color (the same as Theme > 6 – Header BG)
• Leave the Header overlap background as transparent (should be set by default)
  

Step 4 – Adjust Hero Padding as Needed

• Review the site in each device view (desktop, tablet, mobile).
• If the header overlaps the content too much or too little, fine-tune the Hero top padding.
  

Repeat on Category Landing Pages

• Repeat Steps 2 through 4 on each Category Landing Page.
• There is no need to redo the Theme settings — those apply globally
•  Scroll behavior settings carry over, but the Hero spacing must be set per page.