Hello, can someone please help me hide my Google, Rewards, Chat, Signup, and Music icon when the video hero is playing on our home page for both mobile and desktop. They can still display once the customer scrolls past the video hero. This is a major issue. Please assist, we appreciate it. Our website is https://www.yonicque.com
In “Theme edit”, add a “Custom liquid” section at the bottom of the homepage Template area.
Paste the code provided below
This code will work only on homepage since the section is inside homepage template.
The Javascript code will monitor whether header is visible and set a property on the <html> element to reflect this.
Based on this property, CSS part of the code will hide annonying elements when header is visible – meaning at the top of the page, where the video banner is shown and show them back when scrolled down.
<style>
#smile-ui-lite-container,
#shopify-chat,
[class*=kl-teaser],
#trustedsite-tm-image,
.jdgm-revs-tab-btn {
transition: opacity 0.5s linear;
}
[header-visible="true"] :is(
#smile-ui-lite-container,
#shopify-chat,
[class*=kl-teaser],
#trustedsite-tm-image,
.jdgm-revs-tab-btn
){
opacity:0;
pointer-events:none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
const header = document.querySelector('.shopify-section[id$=header]');
if (!header) return;
let callback = (entries) => {
for (var entry of entries) {
if (entry?.target == header ) {
document.documentElement.setAttribute('header-visible', entry.isIntersecting);
}
}
}
let observer = new IntersectionObserver(callback);
observer.observe(header);
});
</script>
At the top / Scrolled
/
They are all still displaying on the Motion theme.
Please see preview: https://t0cyqqmmabwgav4j-26571931701.shopifypreview.com @tim_tairli
@tim_tairli You are a lifesaver!