- This topic has 16 replies, 3 voices, and was last updated 2 years, 2 months ago by
.
How do i make my header sticky when i scroll in the Haste Theme?
Hi there,
Currently, we don’t have such a built-in feature, but you can use Sticky Header Effects for Elementor plugin with this custom CSS:
.sh-header .container { max-width: none!important; }After the setup, you can enable it for the header section under advanced tab.
Best regards,
Shufflehound team
Thank you.
You are welcome!
I would also love to have this as a built-in feature. 🙂
I have a problem with this method. If I set a new header template on a page, and use this sticky header solution, the default header will appear and become sticky and the template header will be gone.
Check it: https://3dplatforma.me/home
Hi there,
First of all, can you please add the custom CSS we have mentioned above? It is needed to fix the width issue.
About the issue itself, it seems that we didn’t quite understand it. Maybe you can attach a screenshot or video?
Best regards,
Shufflehound team
Ok. I added the CSS before, but I put it inside the body tag, which must be outside. My only problem now was the jump when it reached the sticky header threshold. But I solved this by setting the scroll distance to 0px, and I had to add a 100px (width of the header) margin to the topmost section on each page. Is there a more straightforward solution to this?
Can you please reupload the video again?
We made some changes and the mkv file format might work now.
I didn’t realize it wasn’t working. Here you go.
Oh, it seems that still our forum doesn’t want to allow adding that video file.
Maybe you can upload it somewhere and share a link?
Very weird, it looked successfully uploaded. Let’s try like this 🙂
https://drive.google.com/file/d/1pFAsXUfZhe8NwL-glKmtlJMSjDsvH7_w/view?usp=share_link
Thank you for the video, now it was easier to understand the issue.
Did you manage to fix it? We tried the sticky header on your website and we couldn’t replicate the issue you showed in the video.
I didn’t exactly fix the issue. From the video, you can see that the page jumps when I start to scroll (when the sticky header appears). This is the Scroll distance threshold that was I think 100px by default, so when I reach that point the page jumps up. I now put Scroll distance to be 0px, but because of that, I had to offset every page on the website by 100px top margin. This works for the pages, but the blog posts are cut off a little, as you can see in the screenshot below.
I hope you can understand the issue that I’m having. 🙂
Yes, we understand the issue!
Can you please try this custom CSS below? It might improve this.
body.single-post { padding-top: 30px; } @media (max-width: 800px) { body.single-post { padding-top: 70px; } }Let us know if that works!It works! Now it is good.
Anyhow, it would be nice to have a native Haste sticky header with a “hide on scroll” function.
You can lock this thread.
Yes, we can agree on that.
Sure!
