Transparent Header

Store Design
,

Topic summary

Goal: make the header in the Shopify “Taste” theme transparent on slushychallenge.com.

Proposed approaches:

  • Edit base.css (Online Store > Theme > Edit code) to adjust header styling for transparency. This refers to the theme’s main stylesheet but the exact CSS provided is not visible in the thread.
  • Add code in theme.liquid before (the main layout file controlling the page head). The specific snippet is not shown, only a screenshot of where to paste it.

Latest updates:

  • After trying the theme.liquid method, the site owner reports it didn’t work and asks for alternatives.
  • A helper states the menu is now positioned at the top and not floating, and that the effect can be seen when scrolling. It’s unclear if true transparency was achieved or if the outcome matches the request.

Notes:

  • Screenshots are referenced, and the missing code snippets are central to reproducing the solution.

Status: no confirmed resolution. Key question remains whether the header should be transparent on load (e.g., over a hero image) or only on scroll, and which exact CSS selectors in Taste need changes.

Summarized with AI on January 1. AI used: gpt-5.
2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the base.css file and modify the style code here

AnneLuo_0-1712109742959.png
AnneLuo_0-1712109742959.png1110×592 48 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!