Hide Header While Scrolling Down

[martujv]

Hello!

I want to hide my header if I’m scrolling down and make it appear if I’m scrolling up on my website.

Something similar to the Nike website: www.nike.com

My theme is Stiletto and my website is www.truepodium.com (password: y22)

Thanks in advance!

[DaisyVo]

Hi @martujv

To hide your header while scrolling down and show it when scrolling up, add the following custom JavaScript and CSS code to your theme:

Steps:

1-Access Theme Editor:

• Go to Shopify Admin > Online Store > Themes > Click Actions > Edit Code.

2-Add Javascript:

• Open the theme.liquid file or a layout/theme.liquid file.
• Just before the closing tag, add the following script:

3-Add CSS:

• Open the theme.css or styles.css file.
• Add the following CSS to enable smooth transitions:

header {

transition: transform 0.3s ease-in-out;

position: fixed;

top: 0;

width: 100%;

z-index: 9999;

}

4-Save and Test:

• Save the changes and refresh your website to test the functionality.

If your header has a specific class or ID, replace “header” in the script with your actual selector (e.g., .site-header or header). Adjust the script and styles to match your website structure.

[martujv]

Hello!

First of all thanks for the reply! but I find 2 important problems:

1. The header now is not below the announcement bar (this happens in every page) and it looks strange:

2. The transition of the header’s disappearing and appearing is not smooth but instant, which looks bad. Is there any way to make a smooth transition?

Thanks again!