Keep logo while scrolling but hide menu items

Store Design
, , ,
1

Hi there is there a way to separate the logo from the menu blocks on the header? I really want to keep the Logo section while scrolling down but I want the menu blocks (SHOP, TEMPLE COUTURE, etc) to hide when scrolling down. I guess this is possible through changing the code. If someone can help me by telling me the code and where to place (folder,spot,etc) it I would really appreciate it.

an example would be: https://www.chanel.com/lx/

I´m using the theme dawn.

2

Hello @VintrashTemple , may be you want on left side, try this one..
Go to the Online Store >> Theme >> Customise

topnewyork_0-1737527013178.png
topnewyork_0-1737527013178.png613×164 16.5 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

To keep the logo visible while hiding the menu items on scroll, you can achieve this using custom CSS and JavaScript. Here’s a simple approach:

  1. CSS: Add the following to your site’s custom CSS (found in the theme settings):

    .header-logo {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.header-menu {
  position: relative;
  z-index: 999;
}

.scrolled .header-menu {
  display: none;
}

  2. JavaScript: To detect when the page is scrolled and hide/show the menu:

    window.onscroll = function() {
  if (window.scrollY > 50) {
    document.body.classList.add("scrolled");
  } else {
    document.body.classList.remove("scrolled");
  }
};

You can add this JavaScript in your theme’s footer or in a custom script section.

This method will keep your logo visible while hiding the menu as you scroll, similar to what you see on the Chanel website.

For those applying for NBI Clearance, this customization could be useful for building a professional website with a sleek design.

4

Hi @VintrashTemple

Please share the link to your store URL

5

Hi there thank you so much. I´m not sure how to add the JavaScript to my theme´s footer or custom script section. I have to go to edit theme´s code and then I find a bunch of folders, etcc.. which folder should I add this code to and on which tag? I already added the CCS.

6

https://atenatemple.com/

thankss

7

Your store has password protected

Screenshot 2025-01-22 at 13.47.43.png
Screenshot 2025-01-22 at 13.47.43.png2394×1278 171 KB

8

opss sorry just removed the password. thanks!

9

Please change the option Sticky header in your store admin > Sales Channels > Online Store > Themes > Customize > Header to Always, and then add this code to the **theme.**liquid file, after in Online Store > Themes > Edit code
10

thank you so much

11

You are very welcome!

12

I just realized I forgot to mention that I would like for it to be visible again (the menu blocks) when someone scrolls up. is this possible?

13

Please update the code
14

thank you! it worked but when scrolling slowly up the menu blocks start flashing

15

hey it’s glitching when I scroll slowly up. Do you know what happened?