How can I create a transparent header on the Sense theme?

Store Design
,

Topic summary

A user wants to make the header transparent on Shopify’s Sense theme. An expert provides a CSS solution by adding code to the base.css file that sets the header background to transparent and adjusts positioning.

Initial solution:

  • Navigate to Themes → Edit code → Assets → base.css
  • Add CSS targeting .header-wrapper and #shopify-section-header with transparent background and absolute positioning

Issue encountered:
The code affects all pages site-wide, not just the homepage. The original poster asks how to apply transparency across all pages without disrupting the natural page-to-page flow.

Current status:
Another user joins asking specifically for homepage-only transparency. The discussion remains open with the question of page-specific implementation unresolved.

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

Hi!

I would like to create a transparent header on the sense theme. Please help!

url : www.bythesun.store

pw : blueraspberry

2

HI @sarahnimptsch27
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

#shopify-section-header{
margin: 0;
position: absolute;
width: 100%;
}
.header-wrapper {
background: transparent;
}
1 Like
3

amazing! thank you so so much!

4

This code is now affecting each of other pages. Is there a way to just make the header transparent on all pages without messing up how it naturally flows from page to page?

5

Hi do you have a code that will only make the change in homepage ?