Sticky and Transparent Header: Not Working

Store Design
,
1

I’m using the “Sense” theme.

Sticky header is selected from theme editor

Also I checked in base.css code for sticky is there - I aslo added code for transparency

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
  background-color: rgba(0, 0, 0, 0);
}

I also tried the following:

position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;

Also the solution provided by ChatGPT isn’t working:

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

I don’t understand why even adding code nothing changes.

Could you help me in making this header transparent and sticky? Thank you

2

Hello @HairDicted

It’s GemPages support team and glad to support you today.

Sense theme supports sticky header

Screenshot at Feb 17 21-55-47.png
Screenshot at Feb 17 21-55-47.png1899×882 184 KB

To provide you with the most precise solution in this case, could you please share the home page link?

3

The enable sticky header option is already marked in the theme editor as I stated, unfortunately it isn’t working. Home page link is here

4

@HairDicted

This theme’s ‘sticky header’ only works when you scroll up and will be hidden when scrolling down. This is a feature of the theme

Screenshot at Feb 18 18-38-37.png
Screenshot at Feb 18 18-38-37.png1986×536 92.7 KB

If you want it to always be visible when scrolling then add the following code:

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

5

Thanks for the support but it is still not working

6

@HairDicted

Please update the following code:
7

Thank you this worked finally!

The only thing missing is making the header semitransparent.

I added this code

#shopify-section-header .header {
    background-color: rgba(255, 255, 255, 0.5);
  }

and I was able to accomplish the task partialy: the header is semitransparent, but it has empty lateral margins. I tried adding the color also to “header-wrapper” but it is not working.

How to make the header semi-transparent full width?

8

@HairDicted

Please update the following code: