Change transparent header when scrolling

Solved

Change transparent header when scrolling

Emily001
Tourist
6 0 2

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:

Click to expand...
stucle

 

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1954 561 561

This is an accepted solution.

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 </head> or </body>: 

<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!!

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 5 (5)

BSSCommerce-B2B
Shopify Partner
1954 561 561

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:

BSSCommerceB2B_0-1727978909115.png

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: 

 

BSSCommerceB2B_2-1727978941297.png

 

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Emily001
Tourist
6 0 2

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
Shopify Partner
1954 561 561

This is an accepted solution.

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 </head> or </body>: 

<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!!

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Emily001
Tourist
6 0 2

It worked perfectly, thank you so much!

BSSCommerce-B2B
Shopify Partner
1954 561 561

Hi my friend, @Emily001.

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

Glad to helps! 

BSSCommerceB2B_0-1728322658892.png

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now