Change transparent header when scrolling

[Emily001]

Could someone help me with my header design. I want to change the background of the header to white upon scrolling. Unfortunately, I can’t get the codes provided in earlier topics to work for my site. An example of what I want: nourished3.eu.

My store: https://2a7b48-eb.myshopify.com/?_ab=0&_fd=0&_sc=1

Password:

Show More

stucle

[BSSCommerce-B2B]

Hi @Emily001 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.header-wrapper:hover {
  background: white !important;
}

.header-wrapper:hover a,
.header-wrapper:hover .header__heading-logo,
.header-wrapper:hover .header__menu-item span,
.header-wrapper:hover .icon {
  color: black !important;
}

.header-wrapper:hover .header__heading-logo {
  filter: invert(1) !important;
}

Step 3: Save and reload home page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Emily001]

Hi @BSSCommerce-B2B ,

Thank you for your help. However, now it only changes background and color upon hovering. I also want it to change when scrolling down.

[BSSCommerce-B2B]

Hi @Emily001 ,

To make the header’s background and colors change both when hovering and when scrolling down, you can add a scroll event listener with JavaScript. This way, you can apply the same styles upon scrolling as you do when hovering.

Here’s an approach that combines your existing hover styles with a class that is added when the page is scrolled down:

• CSS in base.css:

/* Hover styles */
.header-wrapper:hover {
  background: white !important;
}

.header-wrapper:hover a,
.header-wrapper:hover .header__heading-logo,
.header-wrapper:hover .header__menu-item span,
.header-wrapper:hover .icon {
  color: black !important;
}

.header-wrapper:hover .header__heading-logo {
  filter: invert(1) !important;
}

/* Scrolled down styles */
.header-wrapper.scrolled {
  background: white !important;
}

.header-wrapper.scrolled a,
.header-wrapper.scrolled .header__heading-logo,
.header-wrapper.scrolled .header__menu-item span,
.header-wrapper.scrolled .icon {
  color: black !important;
}

.header-wrapper.scrolled .header__heading-logo {
  filter: invert(1) !important;
}

• JavaScript in theme.liquid. And add this code snippet before tag or :

<script>
  // Add a class to the header when scrolling down
  window.addEventListener('scroll', function() {
    const header = document.querySelector('.header-wrapper');
  
    if (window.scrollY > 50) {  // Adjust scroll threshold as needed
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  });
</script>

This script listens for the page scroll event. Once the scroll position goes beyond 50 pixels, it adds the scrolled class to the .header-wrapper element, which applies the same styles as when hovering. When scrolling back up, the class is removed.

You can adjust the threshold (50) to fit your design needs.

Hope it helps!!

[Emily001]

It worked perfectly, thank you so much!

[BSSCommerce-B2B]

Hi my friend, @Emily001 .

We’re happy to see that our suggestion helped you solve the issue.

Glad to helps!