Make Transparent Header Back to Normal When Scrolling Down

[kitchencrafted]

Hello! I've tried numerous codes to fix this but nothing seems to work.. I want my transparent header to go back to normal when scrolling down (sticky header) and I want it to be normal when opening a collection/product/page but it's always transparent.

https://kitchencrafted.shop/

[GemPages · Accepted solution]

Hello @kitchencrafted ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper {
    background: #000;
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[kitchencrafted]

https://kitchencrafted.shop/

This is my site

[Weaverse]

Hi @kitchencrafted ,

You can try this code to make your sticky header non-transparent when scrolling down:

// Get the header element
const header = document.querySelector('.header-wrapper');

// Add a scroll event listener to the window
window.addEventListener('scroll', () => {
  // Check if the user has scrolled down
  if (window.pageYOffset > 0) {
    // Set the background to none to make the header opaque
    header.style.background = 'none !important';
  } else {
    // Set the background to transparent to make the header transparent
    header.style.background = 'transparent';
  }
});

[Weaverse]

Sorry after taking another look, the code should be updated:

const header = document.querySelector('.header-wrapper--border-bottom');
// Add a scroll event listener to the window
window.addEventListener('scroll', () => {
  // Check if the user has scrolled down
    console.log(window.pageYOffset, header)
    
  if (window.pageYOffset > 0) {
    // Set the background to none to make the header opaque
    header.style.background = '#2c332f';
  } else {
    // Set the background to transparent to make the header transparent
    header.style.background = 'transparent';
  }
});

 
Also, you need to remove the !important code in the CSS file base.css in your theme in this line:

 .header-wrapper{
	background: transparent !important;
	position: absolute;
	width: 100%;
}

[kitchencrafted]

Thank you for your answer, but for some reason it still doesn't work... 

[GemPages · Accepted solution]

Hello @kitchencrafted ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper {
    background: #000;
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[PageFly-Victor · Accepted solution]

Hi @Kitchencrafted,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at bottom of the file -> Save

<style>
{% unless template.name == 'index' %}
.header__menu-item,.header__icon{color:black !important}
{% endunless %}
.scrolled-past-header * {
    color: black !important;
}
.scrolled-past-header .header-wrapper {
    background: white !important;
}
</style>

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[MRamzan]

You can add transparent header by following this: