Transparent Header (only on home page) - Dawn Theme

Store Design
, , ,

Topic summary

A user successfully implemented CSS code to create a transparent header that transitions to black on scroll, but encountered an issue: the styling appeared broken on pages without top banner images.

Solution Provided:
Another user suggested wrapping the code in Liquid template logic to restrict it to the homepage only:

{% if template == 'index' %}
[code here]
{% endif %}

Outcome:

  • The solution was confirmed working by the original poster
  • Issue resolved: transparent header now applies exclusively to the homepage
  • A follow-up question was asked about where to paste the code, but remains unanswered

Technical Context:
The code uses fixed positioning, z-index layering, and JavaScript scroll detection to toggle between transparent and black header states based on scroll position.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, found the below code in another thread - and works great on home page or pages with large banners on the top, but for pages that dont have images, it shows like the attached which isnt ideal - how do I set this code to only apply to the home page? Thanks :slightly_smiling_face:

.header { position: fixed; top: 40px; left: 0; width: 100%; max-width: 100%; z-index: 999; transition: background-color 0.3s ease; } .header.transparent { background-color: transparent; } .header.black { background-color: black; top:0; }

{% endif %}

Screenshot 2023-10-18 at 1.35.50 pm.png
Screenshot 2023-10-18 at 1.35.50 pm.png2944×1136 115 KB

2

Hi @ByAprilCo

You can change code to this so it will apply to homepage only

{% if template == 'index' %}

{% endif %}
2 Likes
3

ABSOLUTE LEGEND! Thankyouuuu

4

You are most welcome, @ByAprilCo

5

Where do you paste this in the code?