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

SorenFox
Visitor
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)

Anshul_arora
Trailblazer
217 46 30

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 https://prnt.sc/ro6mNOKC45vC

-> Next click on "Always" on Sticky Header section https://prnt.sc/0AaTqgmiqCCE

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

PageFly-Henry
Astronaut
783 208 184

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.

SorenFox
Visitor
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!