Reducing Collections banner height while scrolling, Spotlight Theme

[starscream911]

Hello experts!

I want my collection banner to reduce it’s height while scrolling on mobile and desktop.
Please suggest me code to execute. See photos, the black section is our target.

[rajweb]

Hey @starscream911 ,

Could you share your store URL so I can check?

[GTLOfficial]

Hello @starscream911
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 749px) {
.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social {
height: 11rem !important;
margin-top: -5rem !important;
}
}
@media screen and (max-width: 749px) {
.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social {
height: 7rem !important;
margin-top: -3rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Dan-From-Ryviu]

Hi, please try to add this addition code in theme.liquid file and check

[starscream911]

www.elysiumreads.com

[starscream911]

where exactly to add this?

[Dan-From-Ryviu]

theme.liquid file, before

[starscream911]

Hello!

This is out of point, and this code doesn’t work at all.

[starscream911]

This doesn’t work properly. It reduces the size but after a period of time, I want it immediately auto reducing.

[Dan-From-Ryviu]

So please update the code to this

[starscream911]

Doesn’t work as we expect. Resizing takes too much time and it actually happens when i scroll down and go back to the top - then we see this section reduced, but not when scrolling down at first place. And also can we do more reducing when we choose “Relationships & Parenting” collection?

[rajweb]

Hey @starscream911 ,

To reduce the height of the collection banner while scrolling on both mobile and desktop, you can use a combination of CSS and JavaScript (or jQuery) to achieve this effect. Below is an example of how you might implement this.

CSS:

First, add the following CSS to your theme’s stylesheet to define the initial and scrolled states of your banner:

/* Initial state for the collection banner */
.collection-banner {
    height: 300px; /* Adjust the initial height as needed */
    transition: height 0.3s ease; /* Smooth transition effect */
}

/* Scrolled state for the collection banner */
.collection-banner.scrolled {
    height: 100px; /* Adjust the reduced height as needed */
}

Javascript:

Next, add this JavaScript code to your theme. You can place it in your theme’s JavaScript file or within the tags in the theme.liquid file.

document.addEventListener('scroll', function() {
    const banner = document.querySelector('.collection-banner');
    if (banner) {
        if (window.scrollY > 50) { // Adjust this value to change when the height reduces
            banner.classList.add('scrolled');
        } else {
            banner.classList.remove('scrolled');
        }
    }
});

Instructions:

1. Go to Online Store > Themes > Edit Code. In the Assets folder, find your stylesheet (usually theme.css or style.css) and add the CSS code at the bottom.

2. Add the Javascript: In the same Edit Code section, find the Assets folder again and locate your JavaScript file (often named theme.js or similar). Paste the JavaScript code at the bottom of the file.

3. Adjust Values : You may need to adjust the height values and the scroll threshold in the JavaScript code according to your design preferences.

4. After adding the code, make sure to save the changes.

After implementing the code, test it on both mobile and desktop devices to ensure the height reduction works as expected when you scroll down the page. Let me know if you need any further adjustments or assistance!

thanks

[starscream911]

It works perfectly now! Also can we reduce the banner height a bit more when it is already reduced, in mobile preview. “Relationships & Parenting” niche is on 2 rows for more aestethic view, can the banner be with less height in general?

[Dan-From-Ryviu]

Update the code and check again

[starscream911]

PerfecT! Now please let’s make it with same padding on the top and the bottom, because in the moment the text itself is a bit lifted to the top?

[starscream911]

PerfecT! Now please let’s make it with same padding on the top and the bottom, because in the moment the text itself is a bit lifted to the top?

[starscream911]

Can you please response to my final question???

[Dan-From-Ryviu]

Please update code to this and check again

[starscream911]

maybe it still needs adjustment

[Dan-From-Ryviu]

Try to update coded and check again