Skip to content
aeropage-round-dark
Aeropage Documentation
FAQ

icon picker
Sticky Navbar

To create a sticky navbar, you need two blocks: a navbar block with Position set to free and Base Point as middle-top to stick to the top, and a placeholder block with default Position (stack) and a height matching the navbar. The placeholder serves to reserve space at the top of the page, ensuring the navbar hovers over it and not over other page content. Adjusting the navbar's background opacity can make it see-through during scrolling.

In order to make a sticky navbar you would need to add two blocks, one will serve as the navbar and the other one as placeholder. The first block (navbar) should use Position: free and Base Point: middle-top. This will make the block to stick to the top at all times. Screenshot below shows a valid setting for the navbar
image.png
The second block (placeholder) would be an empty block with default Position (stack) and height set to the same value as the navbar block. Its purpose is to occupy space at the top of the page, so that the navbar block is when the page is scrolled to top, hovers over it and not other relavant page content. Screenshot below shows a valid setting for the placeholder
image.png

Additionally you can reduce the navbar background opacity a little to make it see through when scrolling the page. ​
image.png
image.png

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.