Navbar

• src
• components
• navbar.scss

---

Class list

Description

The .navbar is very open ended in its styling, and works well with the flexbox classes. This opens up many options for how you want your .navbar to be laid out.

Use a .navbar-item inside of a .navbar to either contain content, or for a link.

Example

<nav class="navbar flex between cross-center">
    <div>
        <a href="" class="navbar-item">Home</a>
        <a href="" class="navbar-item">Shop</a>
    </div>
    <div>
        <div class="navbar-item">
            <button class="button">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </div>
</nav>

Fixed Top

Using the .fixed-top class on a .navbar fixes it to the top of the viewport, and also sets the z-index to 25.

Is Active

Use the .is-active class on a .navbar-item to give it the same styling as hovering over an a.navbar-item.

Font Size Scaling

Use the font-size utility classes on an .navbar to scale its size.

<nav class="navbar h6">
    <a href="" class="navbar-item">home</a>
</nav>
<nav class="navbar">
    <a href="" class="navbar-item">home</a>
</nav>
<nav class="navbar h3">
    <a href="" class="navbar-item">home</a>
</nav>