Sense theme header transparent

Technical Q&A
, , ,
1

Hi Team,
How to make header transparent ,
Like this

image
image720×388 68.6 KB

2

Hey @Sohan2198

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if template == 'index' %}
<style>
.header {
    position: absolute !important;
    width: 100% !important;
    max-width: 100% !important;
}
header:has(.header__menu-item[aria-expanded="true"]) {
    background: white !important;
}
</style>
{% endif %}

RESULT:

image
image1900×855 237 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Hi @Moeed ,

onclick menu need to show like this

image
image786×345 50.1 KB

4

I have updated my code above, please add the updated code.

Best,
Moeed

5

Sence is the same as Dawn/Trade, etc..
Try one of the solutions I offered there:

6

You can add this code to theme.liquid file under <head>

{% if template == 'index' %}
<style>
   #MainContent {   margin-top: calc(var(--header-height) * -1); }
  .section-header  sticky-header { background: transparent; }
 .section-header .header__icon .svg-wrapper,  .section-header  .header__menu-item .icon-caret, ..section-header  .header__menu-item span {
  color: #ff;
}
</style>
{% endif %}

Result

Screenshot 2026-02-03 at 16.37.00
Screenshot 2026-02-03 at 16.37.001920×396 67.9 KB

7

Hi @Moeed
need to show first white text and logo, after scroll
header bg white & text and logo in black,