Keep logo while scrolling but hide menu items

VintrashTemple · ‎01-22-2025

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.

Dan-From-Ryviu · ‎01-22-2025

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 <head> in Online Store > Themes > Edit code

<style>
@media (min-width: 990px) {
.scrolled-past-header .header__inline-menu { display: none; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

topnewyork · ‎01-22-2025

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

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

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

NBI098 · ‎01-22-2025

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:

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;
}

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.

VintrashTemple · ‎01-22-2025

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.

Dan-From-Ryviu · ‎01-22-2025

Hi @VintrashTemple

Please share the link to your store URL

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

VintrashTemple · ‎01-22-2025

https://atenatemple.com/

thankss

Dan-From-Ryviu · ‎01-22-2025

Your store has password protected

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

VintrashTemple · ‎01-22-2025

opss sorry just removed the password. thanks!

Dan-From-Ryviu · ‎01-22-2025

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 <head> in Online Store > Themes > Edit code

<style>
@media (min-width: 990px) {
.scrolled-past-header .header__inline-menu { display: none; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

VintrashTemple · ‎01-22-2025

thank you so much

Dan-From-Ryviu · ‎01-22-2025

You are very welcome!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

VintrashTemple · ‎01-22-2025

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?

Dan-From-Ryviu · ‎01-22-2025

Please update the code

<style>
@media (min-width: 990px) {
.header__inline-menu {  transition: display .5s ease-in-out; }
.scrolled-past-header .header__inline-menu { display: none; }
html .scrolled-past-header.scroll-up .header__inline-menu { display: block; }
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    let lastScrollTop = 0;
    const header = document.querySelector('.section-header');

    if (header) {
      window.addEventListener('scroll', function () {
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (currentScrollTop < lastScrollTop) {
          // Scrolling up
          header.classList.add('scroll-up');
        } else {
          // Scrolling down
          header.classList.remove('scroll-up');
        }

        lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop; // Prevent negative values
      });
    }
  });
</script>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

VintrashTemple · ‎01-23-2025

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

VintrashTemple · ‎02-21-2025

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