06.1 Navigation & mobile side nav - pimmey/axala-docs GitHub Wiki

Navigation

This theme offers two types of navigation - the one visible on desktop and a side-nav for mobile devices.

This is the navigation structure:

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a class="brand-logo" href="#/">Axala</a>

            <!-- A desktop version navigation-->
            <ul class="right hide-on-med-and-down">
                <li>
                    <a href="#/cases">Cases</a>
                </li>
            </ul>

            <!-- Side navigation for mobile devices-->
            <ul class="side-nav" id="slide-out">
                <li>
                    <a href="#/cases">Cases</a>
                </li>
            </ul>

            <!-- Side nav menu button-->
            <span class="right show-on-medium-and-down hide-on-large-only">
                <a class="sidenav-toggle" id="sidenav-toggle" href="#" data-activates="slide-out">Menu</a>
            </span>
        </div>
    </nav>
</div>
⚠️ **GitHub.com Fallback** ⚠️