How to create a secondary navbar in the content page that sticks under the navbar from layout page?

Wappler General Need Help
1

Hello everyone,

I have a layout page with navbar, but in one of my content page, I need another sticky top navbar/container that does not overlap with the one from layout page, instead it just sticks under it on scroll. any tips?

2

Is the navbar on your main page fixed top, sticky top or is it just using the default position?
Does the navbar on the content page need to be fixed top or sticky top?

3

the navbar on the layout page sits on the very top of the screen, so either fixed top or sticky top (right now I’m using sticky just so I don’t have to set the margin of the content).

Meanwhile, the navbar on the content page should be sticky top. It should sticks below the navbar from the layout page on scroll.

4

You can add an id to your content page container/navbar like id="sticky-secondary" and then style it like:

#sticky-secondary {
    top: 56px;
}

so it stays under the top navbar.