Sticky navbar

Sticky navbars or headers are great for keeping site navigation and call-to-actions in view for visitors at all times. Using just a little bit of custom CSS, we can pin a navbar to the top of your page as a visitor scrolls down.

Before adding any snippets, let's set up your page. Open the Instant Layouts from the toolbar on the left side of the page builder. Drag the first option, the Navbar, onto the top of your page. Select the box that was added by this instant layout and give it a custom element name of "navbar".

Exit the page builder and navigate into the page settings. Create a new snippet and paste in the following code:

<style>
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
</style>

Enable the snippet for the builder as well as live pages so you can preview it as you edit your page. Add the snippet to your page and go back into the builder. Now you're free to add navigation links and style the navbar to match your brand.

Keep in mind that since the navbar is fixed to the top, it will always overlap whatever content is also at the top of the page. So make sure to add extra top padding to the box below your navbar.