Sticky Navigation on Scroll

[Teodor]

In this tutorial we will show you how create a “sticky” Navbar for your site.

What is a Sticky Menu?

Sticky, navigation is basically a website menu that is not initially fixed on the top of the page so it scrolls with your content. Once the navigation hits the top of your page when scrolling down, it sticks there and does not disappear when the user scrolls further down the page.

It is really easy to do this with Wappler. We created a page, and added a default Navbar component, below the header. It currently scrolls away if scroll down the page:

Select your Navbar (1) and open the Position Menu (2):

Select Sticky Top:

And you are done! Now your Navbar will remain fixed to the top of your page, when you scroll down:

---

   

---

[ben]

If the sticky-top does not work as shown in the example, try applying to the Header instead.

[Teodor]

Hi Ben,
The Navbar is currently outside of the header, so nothing will change with the navbar if you add it to the header.

[ben]

Yes I understand that in your situation, it works perfectly, nothing wrong. I have had situations where I have had to spend some time to find the problem. The solution was to apply the sticky-top to an upstream container.