Pixel Perfect

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

Given that both transparent and non-transparent headers share the same ADVANCED HEADER, there are some design rules that must be followed for this new transparent header process:

• For all sites featuring transparent headers, the non-transparent / internal page header design must be designed with a dark(ish) background color and white/light text.
• Navigation bar must have a dark(ish) background and white/light text (same as header text above)
• NOTE: you can add an opacity to the background color, but be aware that it will affect the nav color on non-transparent pages as well.
• Header Reviews widget summary link does NOT update on scroll, so it should be set to the same color as the header text
• HWP 2.0 sites contain the transparent header only on the home page
• Hibu One sites will contain the transparent header on the home page and ALL category landing pages

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
• NOTE: Header background color control is located under 'Background and Style', and is connected to Theme --> 6 - Header BG. Color should be updated in the Theme.

• Do not apply background colors directly to header sections or columns.
• For the Header Reviews widget, set the color of the Summary Link to Theme --> 7 - Header Text

• 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 area and select ADVANCED HEADER (orange)
• In the Design panel, scroll to the bottom and toggle on "Overlap 1st section on page"
• Check that "Header overlap background" is set to none/transparent
• Update settings under SCROLL BEHAVIOR

1. Make sure "Set as sticky header" is toggled on
2. Toggle on "Change header on scroll"
3. Ensure the color for "Background on scroll" to the same color that you've defined for the standard / non-transparent header design (Theme --> 6 - Header BG)
4. Under "More header colors on scroll" ensure the color for "Text" is assigned to Theme --> 7 - Header Text

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.
• Note the final padding values used for all three breakpoints so you can easily apply them for Category Landing pages
  

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.