How to create a sticky and shrinking header

Hello jens,
We’ve made huge huge updates regarding Menu conflicting, Theme compatibility and lots of things.
We’re doing our final tests for push update(it will be done in next 24hrs).
I hope your problems will be solved automatically.
Though there’s a possibility, can you please share your website URL so we can see the problem?
Also, please let me know the Theme you’re using?
Thanks

Hi,
We’ve pushed update, can you please check now?
Thanks

Hi,

I am using Hello Theme from Elementor. Also also installed the MA update.

I defined a CSS ID for the section and was able to make it stick when using MA Nav.
I tried to use the description from Elementor Blog (https://elementor.com/blog/shrinking-sticky-header/) to make it stick. But I do not getting it to work.

Any help? Thanks.

Hi,
Thanks for the reference. Please check the video on this section – “How To Create A Sticky Navbar In Elementor Page Builder?”
https://master-addons.com/docs/addons/navigation-menu/
Hope it will help you.
Thanks

Hi,

I did this already and I was able to create a sticky header.
But now I also would like to have it shriking when the user scrolls.
Here I need help.

Thanks, Jens

Please share your Navmenu Settings, so I can understand it better. It will be great if you create a short video with “Loom” software.
I can give you exact instructions you need.
Thanks

Hi,

I was ablt to solve it using this instruction: https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp.

Thanks, Jens

Hi,
wow, great to know that. I didn’t understood what you want to do.
We’ve this feature: https://www.dropbox.com/s/182zkex3mv2s9pp/Screen%20Shot%202020-09-16%20at%202.04.45%20AM.png?dl=0

You need to Enable Sticky Menu then you can select “On Scroll Sticky” effect for this.

Very happy to know that you’re problem has been solved.
Thanks

Hi,

I tried to use “on scroll sticky”. But this does not shrink the header.
It is not changing its hight.

Best regards, Jens