My Style

Navbar

Websites header which can contain app name, logo, navigation links.

Default Navbar

You can customize the footer height using CSS variables.

<header class="navbar">
  <div class="navbar__app">
    <i class="material-icons navbar__logo">extension</i>
    <h2 class="navbar__app__name">
      <a>AppName</a>
    </h2>
  </div>
  <section class="navbar__links">
    <a class="navbar__link link">About</a>
    <a class="navbar__link link">Docs</a>
  </section>
</header>

Centered Navbar content

You can also center the content that is within the navbar

<header class="navbar navbar--content-centered">
  <div class="navbar__app">
    <i class="material-icons navbar__logo">extension</i>
    <h2 class="navbar__app__name">
      <a>AppName</a>
    </h2>
  </div>
  <section class="navbar__links">
    <a class="navbar__link link">About</a>
    <a class="navbar__link link">Docs</a>
  </section>
</header>

Right-aligned Navbar

If you want to change the order in which logo and links are displayed

<header class="navbar navbar-r-t-l">
  <div class="navbar__app">
    <i class="material-icons navbar__logo">extension</i>
    <h2 class="navbar__app__name">
      <a>AppName</a>
    </h2>
  </div>
  <section class="navbar__links">
    <a class="navbar__link link">About</a>
    <a class="navbar__link link">Docs</a>
  </section>
</header>

Fixed Navbar

You can fix the navbar so that it's visible even when the page is scrolled. Use the class 'navbar--fixed'.

<header class="navbar navbar--fixed">
  <div class="navbar__app">
    <i class="material-icons navbar__logo">extension</i>
    <h2 class="navbar__app__name">
      <a>AppName</a>
    </h2>
  </div>
  <section class="navbar__links">
    <a class="navbar__link link">About</a>
    <a class="navbar__link link">Docs</a>
  </section>
</header>