Disable "Scroll Up" Sticky Header ( Studio Theme )

Store Design
1

I am trying to stop my sticky header menu from disappearing and revealing itself upon scrolling up and down.

I’ve padded the announcement bar to act as a full-page image above the header, I would like for the header to stick to the top of the web page upon scrolling down, and not to disappear and reappear upon scrolling up and down.

Cannot seem to figure it out. Any ideas?

2

Hello @francetajohnson ,

We are OneExperts from OneCommerce and we here to help you out.

Firstly, we want to congratulate you on your new Shopify store. We understand from your question is you’re trying to make the header menu of your Shopify store “sticky” so that it stays visible when the customer scrolls up and down the page, you can achieve this using some custom CSS.

Here is an example of how to do this:

  1. In your Shopify admin, navigate to the theme editor.
  2. From the theme editor, locate the “Assets” folder, and click on the “theme.scss.liquid” file to open it.
  3. Add the following CSS code to the file:

header {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

The above code will fix the position of the header at the top of the page and make sure it is always visible.

  1. Now if you want to adjust the height of the image to be the same as the header height and leave some space between them.

.announcement-bar {
height: 80px;
padding-top: 80px;
background-size: cover;
}

This will add a padding top of 80px and match the height of the announcement bar to the header and give the image an effect of the header sitting behind it.

  1. Click on “Save” to apply the changes, you should now see the header fixed on top of the page, even when the customer scrolls down.

Please note that the above codes are examples and the class and id names may vary depending on the theme you are using and how it is constructed. It is always a good idea to backup your theme before modifying it and to check the browser’s developer tool or contact theme support for further help.

Please let us know if you have any other question or if you need further clarification.

Best regards,

OneExperts by OneCommerce

3

Hi @francetajohnson

I would like to give you a solution to support you.

You can try adding below code:

  1. Go to Online Store → Theme → Edit code. https://prnt.sc/elKuwYWlBrEo

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file. https://prnt.sc/RBeWM78DtL8H

.shopify-section-header-sticky {
    position: sticky;
    top: 0;
    transform: translateY(0);
}

Best regards,
GemPages Support Team

1 Like
4

This worked perfectly, thank you… but now there is a lag on the sticky header… I need to scroll down maybe 100px before it sticks… any ideas on how to fix that as well?