Tutorial

Centered navigation with logo on top

Use the navigation with logo or brand text on top

With the addition of a CSS class, you can make the logo or brand text appear at the top of the navigation bar. This modification has effect in the landscape view.

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 "navigation-logo-top" class to the "nav" element:

Copy

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

The result:

You can replace the brand text with a logotype image.

In the catalog you can find dozens of pre-defined navigation bars. The items 34, 35 and 36 are navigation bars with logo on top. Just copy and paste the code. See the list of tutorials for other ways to modify the navigation bar and add features.