How to make header fixed when scrolling up and down? Or Permanent Sticky Header? (Ride Theme)

2 0 0

I want the header to always stay on screen when scrolling up or down instead of the current sticky header that disappears when scrolling down and reappears when scrolling up. Thanks!

Replies 3 (3)

364 103 71

Hello @SorenFox ,

I understand your issue, you can resolve this with the help of theme customizer.

-> Go to Online Store -> Themes -> Click Customize.

-> Now, select the Header section in Theme customizer

-> Next click on "Always" on Sticky Header section

Now the header will appear in both cases while you scroll up or down.

-> Save changes.

I hope this helps.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

1069 306 260

Hi @SorenFox 


This is Henry from PageFly - Landing Page Builder App


You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

sticky-header {

    position: fixed !important;

    z-index: 1;

    top: 0;

    width: 100% !important;



In case the above code does not work, please share with me the editor url and password page. So I can examine this issue more closely.

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

2 0 0

This works, however the announcement covers part of the header until you scroll down. Is there a way to have the announcement bar stay at the top, but maybe be hidden once scrolling down?

Thank you!