Make Transparent Header Back to Normal When Scrolling Down

Shopify Discussion
1

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/

2

https://kitchencrafted.shop/

This is my site

3

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';
  }
});
4

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%;
}
5

Thank you for your answer, but for some reason it still doesn’t work…

6

Hello @kitchencrafted ,

You can follow these steps:

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

GemPages_0-1679538189443.png
GemPages_0-1679538189443.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1679538217049.png
GemPages_1-1679538217049.png1559×861 65.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

7

Hi [email removed]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

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

8

You can add transparent header by following this: