NAVX

Tutorial and guides

Offcanvas on right side

Make the offcanvas panel appears at the right side

You have the option to make the offcanvas panel appear on the right side of the screen. See below how to do it.

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

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 "offcanvas-right" class to the "navigation-body" element: 

<div class="navigation-body offcanvas-right">
    ...
</div>

The result:

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