Tutorial

Sticky navigation

Make the navigation sticky on top after scrolling

Some types of websites use a sticky navigation elements at the top. This type of navigation remains visible even if the page is scrolled down. Follow the steps below to set up a sticky navigation.

1 - Follow the documentation and set up a navigation bar with a simple menu:

Copy

<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

2 - Add the "sticky-top" class to the "nav" element:

Copy

<nav id="navigation" class="navigation sticky-top">
    ...
</nav>

The result:

See the list of tutorials for other ways to modify the navigation bar and add features.