Change logo in header while scrolling and on the other pages than the homepage

Change logo in header while scrolling and on the other pages than the homepage

Bodyguard55
New Member
7 0 0

Hi there

 

Can someone help me with the code on my website? I would like to have a diffrent logo while scroling and on the other pages? 

 

The website is www.bodyguard-shop.ch

 

the links for the images are: 

 

1. while scrolling: https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830...

2. on homepage: https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.pn...

 

tanks a lot in advance

Replies 2 (2)

Leysam
Shopify Partner
128 15 47

@Bodyguard55 
Heres a quick example of the code. I have not tested this, but this will give you an idea of how to do it.

 

 

<img class="logo-main">
<img class="logo-secondary">

<script>
let logoChanged = false;
function changeLogo(shouldChange){
  const mainLogo = document.querySelector('.logo-main');
  const secondaryLogo = document.querySelector('.logo-secondary');
  if (shouldChange) {
      mainLogo.style.display = 'none';
      secondaryLogo.style.display = 'block';
  } else {
      mainLogo.style.display = 'block';
      secondaryLogo.style.display = 'none';
  }
}
document.addEventListener("scroll", (event) => {
  let shouldChange = logoChanged;
  const lastKnownScrollPosition = window.scrollY;
  if (lastKnownScrollPosition > 30) shouldChange = true;
  else shouldChange = false;
  
  // make sure to only run the function when the value of logoChanged is different than the previous value
  if (shouldChange !== logoChanged) changeLogo(shouldChange);
});
</script>​

 

 

 

Leysam | The Shopify Guy  

 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Email me at leysam@grindot.studio
- Check our work and services at grindot.studio

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @Bodyguard55,

You can paste this into the Custom CSS in the Theme Customizer's settings

.header__heading-logo-wrapper img {
    display: none !important;
}

.section-header .header__heading-logo-wrapper:before {
    content: "";
    display: block;
    width: 150px;
    height: 35px;
    margin-top: 10px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.png?v=1703237041') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}

.section-header.scrolled-past-header .header__heading-logo-wrapper:before {
    content: "";
    margin-top: 0px;
    width: 150px;
    height: 50px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830515.png?v=1705573981') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!