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
126 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
1857 523 401

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!