Navbar

Turns an HTML <nav> into a bar supporting collapsible menus. The navbar has the ability to automatically collapse when screen size is reduced without the use of JavaScript.

Structure

Examples

<nav class="bar layout-flex">
  <a class="lay-fitted" href="">Home</a>
  <input class="toggle" type="checkbox" id="nav-toggle" role="button" />
  <ul class="menu">
    <li class="active"><a class="disabled" href="">Acme</a></li>
    <li><a href="present/">
      <span class="fas fa-file-alt"></span>&#xA0;Documentation</a></li>
    <li><a href="quick-start">
      <span class="fas fa-bolt"></span>&#xA0;Quick Start</a></li>
  </ul>
  <label for="nav-toggle" class="toggle lay-fitted">☰</label>
</nav>

Properties

--guise-skeleton-navbar-background-color
Defaults to --guise-skeleton-menu-background-color.
--guise-skeleton-navbar-border-color
Defaults to --guise-skeleton-menu-border-color.
--guise-skeleton-navbar-font-family
Defaults to --guise-skeleton-menu-font-family.