Tutorial

Transparent navigation

Create a transparent navigation

If you have a pretty header on your website, an opaque navigation bar may not be the best design strategy. See below how to make the navigation bar transparent.

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

Copy

<nav id="navigation" class="navigation navigation-justified">
    <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 "navigation-transparent" class to the "nav" element:

Copy

<nav id="navigation" class="navigation navigation-justified navigation-transparent">
    ...
</nav>

The result:

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