Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
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
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!
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
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.
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
It worked perfectly, thank you so much!
Hi my friend, @Emily001.
We're happy to see that our suggestion helped you solve the issue.
Glad to 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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024