How can I make my header transparent on mobile only when its near the banner. Here is an example of what I am looking for!
The header comes back to its normal color when you scroll down! My website link is:
Topic summary
A user seeks to make their header transparent on mobile devices only when positioned over the banner section, with the header returning to its normal color upon scrolling.
Visual Reference:
- An example image demonstrates the desired transparent header effect on mobile.
Solutions Provided:
Two community members offered similar CSS-based solutions:
- Approach: Insert custom CSS code into the
theme.liquidfile, specifically above the</head>tag. - Implementation: Both responses include code snippets (markup format) to achieve the transparent header effect.
- Location: Access via Shopify Admin → Online Store → Themes → Edit Code.
One responder included a result screenshot showing the implementation. The discussion appears resolved with actionable technical solutions provided.
Hi @omar_ab ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
Hi @omar_ab
You can do that by adding this code to your theme.liquid file, after in Online Store > Themes > Edit code