Make header change size on scroll

Wappler General How To
1

Hello! Just wondering if it is possible in Wappler to make the header “shrink” in size (about 50%) when visitors scroll down the page? Or do I need to add custom code? There is the option to make the header Sticky top (great!) but nothing about size change…

This is a very common practice to make the top element (brand/Navbar etc.) take less place when stick to the top which is great especially for smaller screens size.

Thank you

2

Use the browser component to detect scrolling. You can check if the user scrolled past XXXpx and add an additional class for the navbar.
With this additional class style the menu as you wish it to look when the page is scrolled down.

1 Like
3

Thank you very much Teodor I will try that.