On scroll, text menu to remain stick and logo to disappear

Store Design
, , ,
1

Hi,

I’m using the shopify theme Prestige

My menu currently looks like this image directly below

jetwellworld_1-1745908000293.png
jetwellworld_1-1745908000293.png978×237 89.2 KB

When scrolling down my page I want the logo to disappear and look like this image directly below

jetwellworld_0-1745907977741.png
jetwellworld_0-1745907977741.png1895×126 99.1 KB

How would I achieve this please? It seems I can’t edit it to be that way through the customize option and may need custom code

Thanks!

2

Hey @jetwellworld

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1745908665005.png
Moeed_0-1745908665005.png1899×824 116 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Here’s how to achieve it without digging into code snippets yourself—just the high-level steps:

  • Define a “scrolled” style
    In your theme’s stylesheet, create a variation for the header’s “scrolled” state that hides (or fades out) the logo when it’s active.

  • Detect page scrolling
    Add a small script in your theme assets that watches how far the page has moved. Once you’ve scrolled past your chosen point, it toggles the header into that “scrolled” style; scrolling back up restores the original logo.

  • Fine-tune and test
    Publish those changes, load your site, and scroll. Then adjust the scroll-distance threshold and fade timing until it feels just right.

If you’d like me to implement this for you—complete with the exact styling and scroll trigger—just let me know. I specialize in Prestige customizations and can have it live in no time.

4

This worked. You’re a star :star:

5

My logo completely disappears on mobile. I have a burger menu on the left on mobile. When scrolling down there’s no logo icon. How do we solve this pls?