What's your biggest current challenge? Have your say in Community Polls along the right column.

Trade Theme - Want Sticky Header to have 0.9 transparency on scroll down.

Trade Theme - Want Sticky Header to have 0.9 transparency on scroll down.

SASD
New Member
4 0 0

We are using the Trade Theme (15.0) with a the Sticky Header - "Always Reduce Logo Size"

 

We want the sticky header to have some transparency when you scroll down, basically when it reduces the logo size on scroll down that it also adds some transparency to the header, so its not so in your face anymore.

Replies 6 (6)

BSSCommerce-TA
Shopify Partner
124 24 24

Hi @SASD , you can change header's transparency on scroll down by following these steps: 

1. Navigate to Online store => Themes => Edit code

1.png

2. Find theme.liquid file and add this code snippet before closing head tag : 

    <script>
      window.addEventListener('scroll', function() {
          var header = document.querySelector('sticky-header .header');
          if (window.scrollY === 0) {
            header.style.opacity = '1';
          } else {
            header.style.opacity = '0.9';
          }
      });
    </script>

BSSCommerceTA_0-1719066264612.png

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SASD
New Member
4 0 0

Thank you for trying to help @BSSCommerce-TA 

 

Unfortunately, I put that in and it didn't work. Not sure if there are changes with v15.0 of the them that just came out.

 

This is what I ended up with, I also did something that makes the padding smaller at the same time.

 

 

{% ########### Personal Changes ########### %}
    <script>
      {% ########### Transparent Header on Scroll ########### %}
      window.addEventListener('scroll', function() {
          var header = document.querySelector('.header-wrapper');
          if (window.scrollY === 0) {
            header.style.opacity = '';
          } else {
            header.style.opacity = '0.9';
          }
      });

      {% ########### Header Menu Padding smaller on Scroll ########### %}
      window.addEventListener('scroll', function() {
          var menu = document.querySelectorAll('.header__menu-item');
          if (window.scrollY === 0) {
            for(var i = 0; i < menu.length; i++) {
              menu[i].style.paddingTop = '';
              menu[i].style.paddingBottom = '';
            }
          } else {
            for(var i = 0; i < menu.length; i++) {
              menu[i].style.paddingTop = '0.8rem';
              menu[i].style.paddingBottom = '0.8rem';
            }
          }
      });
</script>

 

 

Do you see any issues with how I've done this, or how I could do it better? 

SASD
New Member
4 0 0

I did some more trial and error and found this to work.

 

<script>
window.addEventListener('scroll', function() {
          var header = document.querySelector('.header-wrapper');
          if (window.scrollY === 0) {
            header.style.opacity = '';
          } else {
            header.style.opacity = '0.9';
          }
      });
</script>

 

Question, I'm trying to get the padding to go from the normal 1.2rem to 1.0rem on scroll as well just to reduce the size of the sticky menu. When I adjust the above script it only adds the style tag to the first menu item. Is there a way to adjust all of the menu items with the  header__menu_item class? Sorry its been a long time since i programmed, need to get back into it. Guessing i need to do an array or something?

BSSCommerce-TA
Shopify Partner
124 24 24

 

It's great that you've found a way to make it work.

With your question, you need to identify if there are any commonalities among the menu items you've selected, such as matching the class name 'header-wrapper-items'.
Then, you use var header-item = document.querySelectorAll('.header-wrapper-items'); which returns a NodeList.

Convert it to an array:
let myArray = Array.from(header-item). Then, map through myArray to access each item:

myArray.map((item, index) => {
item.style.height = '1rem'; // Assuming 'height' is the property you want to change
})

And you place this code snippet inside the event listener for the window scroll event.

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

 
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

tim
Shopify Partner
3911 394 1435

If you want some transparency when logo gets smaller then you can add this to the "Custom CSS" under "Theme settings":

 

.section-header {
  transition: opacity .3s cubic-bezier(.52,0,.61,.99);
}
.scrolled-past-header:not(:hover) {
  opacity: 0.5;
}

 

Change the opacity value to your liking.

 

Probably no what you want, but it's also possible to change transparency only when actually scrolling, but this will require some JS coding.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
SASD
New Member
4 0 0

Oh I like this, yeah the scrolling doesn't matter. Its more that it happens at the same time as when the logo gets smaller when we scroll down.

 

Our header is a bit in your face for it to be there the whole time as a sticky header, IMO. Its for my daughters candle business so the header is Pink, but once you scroll down its too much for my liking. So wanted some transparency to soften it, and also now looking to change the menu padding top&bottom to make it a bit smaller.

 

I've got it working in JS but I like your method. Is there any way to transition/change the padding for the menu at the same time?