Get boba!
boba Version 1.7.2

Navbar

A purely CSS, responsive navbar.
<nav class="navbar">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-nav" />
    <label class="navbar-menu-toggle" for="example-nav"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items">
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
    </ul>
</nav>

Positioning

Easily change the positioning behavior of your navbar.

Sticky

Add the .sticky class to the navbar to make it stick to the top of the page.

Clarification

The navbar will be treated as position: relative; until the user scrolls down the page at which point it will behave as position: fixed;.

<nav class="navbar sticky">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-sticky" />
    <label class="navbar-menu-toggle" for="example-sticky"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items">
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
    </ul>
</nav>

Fixed

Add the .fixed class to the navbar to make it fixed to the top of the page.

Tip

A fixed navbar sits on top of the normal page content. Be sure to account for this!

<nav class="navbar fixed">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-fixed" />
    <label class="navbar-menu-toggle" for="example-fixed"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items">
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
    </ul>
</nav>

Alignment

Painlessly align menu items within the navbar.

Right-Aligned

Navbar menu items can be aligned to the right by adding the .menu-items-right class to the .navbar-menu-items element.
<nav class="navbar">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-alignment" />
    <label class="navbar-menu-toggle" for="example-alignment"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items menu-items-right">
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
    </ul>
</nav>

Combinations

Have both left-aligned and right-aligned menu items in the same navbar by creating two .navbar-menu-items containers and adding the .menu-items-right class to the second container.
<nav class="navbar">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-alignment" />
    <label class="navbar-menu-toggle" for="example-alignment"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items">
        <li>
            <a href="#"><span>Left</span></a>
        </li>
        <li>
            <a href="#"><span>Left</span></a>
        </li>
        <li>
            <a href="#"><span>Left</span></a>
        </li>
    </ul>
    <ul class="navbar-menu-items menu-items-right">
        <li>
            <a href="#"><span>Right</span></a>
        </li>
        <li>
            <a href="#"><span>Right</span></a>
        </li>
        <li>
            <a href="#"><span>Right</span></a>
        </li>
    </ul>
</nav>

Colors

Navbars come in all of boba's colors.
<nav class="navbar green">
    <a href="#" class="navbar-brand">boba</a>
    <input class="navbar-menu-target" type="checkbox" id="example-green" />
    <label class="navbar-menu-toggle" for="example-green"><span class="navbar-icon"></span></label>
    <ul class="navbar-menu-items menu-items-right">
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
        <li>
            <a href="#"><span>Category</span></a>
        </li>
    </ul>
</nav>