LOGO TRANSPARENT

Shopify Discussion
1

Hi,

How do I make my logo transparent when scrolling and it is above an image and/or text.

See example website: https://uptherestore.com/

2

URL is not on hand as of yet - sorry!

3

Hi @RhyMol ,

You can try adding the following event listener for the logo element to make it transparent on the scroll.

You can go to your Shopify admin panel.

Click on Online Store > Themes.

Click on Actions > Edit code.

Locate the file named theme.liquid (that controls the overall layout)

Paste the following scroll effect snippet before closing the tag:

(you might need to adjust this selector depending on your theme’s structure, please see the attached screenshot and explanation below to identify your theme’s logo element)

Sweans_0-1721284621282.png
Sweans_0-1721284621282.png639×176 97.3 KB

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let logoElement = document.querySelector('.header-logo'); // Adjust selector if needed (see explanation below)
if (scrollTop > 0) {
logoElement.style.opacity = 0; // Make logo transparent on scroll
} else {
logoElement.style.opacity = 1; // Make logo solid on top
}
});

Explanation:

  1. When scrolling, this code adds a scroll event listener to the logo element (‘header-logo’ in this example) and you might need to adjust this selector depending on your theme’s structure. Based on the scroll position, makes the logo transparent and solid.
  2. You can also change the logo’s transparent initiate position by adjusting the ‘if’ condition value (‘scrollTop > 0’ in this example).
  3. Find your Logo element classname or identifier: Right-click on your website logo > Click ‘Inspect’ > Identify the logo class (see the attached sample screenshot) inside the ‘Header’ open() and closing() tags.

Please reach out if you need further assistance.
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

4

Hi @RhyMol

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check if it reaches your request

.scrolled .header .header__logo { opacity: .3; }
5

Hi @RhyMol ,

We are providing an update to the code for better understanding.

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let logoElement = document.querySelector('.header-logo'); // Adjust selector if needed (see explanation below)
if (scrollTop > 0) {
logoElement.style.opacity = 0.5; // Make logo transparent on scroll here. You can adjust the value from 0.1 to 0.9 according to your requirement.
} else {
logoElement.style.opacity = 1; // Make logo solid on top
}
});