Tutorial

Fixed navigation

Place the navigation bar fixed on top.

Some types of websites use fixed 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 fixed 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 "fixed-top" class to the "nav" element:

Copy

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

The result:

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