Navbars

Basic navbar

Create a basic navbar by appling a navbar class to a nav element. Then wrap links in a div with the class navbar-menu.

  
<nav class="navbar">
  <div class="navbar-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Navbar with centered links

Positioning classes can also be applied to navbars. Here, the class center-horizontal has been applied to the nav element.

  
<nav class="navbar center-horizontal">
  <div class="navbar-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Navbar with links pushed to the right

In this example, the positioning class push-right is be used to right-justify links.

  
<nav class="navbar push-right">
  <div class="navbar-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Navbar with equally spaced links

The class navbar-spread can be used to create equally spaced links in the navbar. This class is not compatible with navbars containing brands.

  
<nav class="navbar navbar-spread">
  <div class="navbar-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Navbar with brand

Optionally, you can include an element with the class navbar-brand to include the name of your site in the navbar.

  
<nav class="navbar">
  <a class="navbar-brand" href="#">Site Name</a>

  <div class="navbar-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

A slideout navbar

The navbar can be changed to a slideout menu by adding a navbar-slideout class and including a menu-toggle button. A menu-dismiss button should also be included in the navbar-menu in case the toggle is covered when the slideout menu is visible. Adding an element with a slideout-brand class is optional. In this example, HTML character entities are used for the toggle and dismiss icons, but img or svg elements could be used as well.

  
<nav class="navbar navbar-slideout">
  <a class="navbar-brand" href="#">Site Name</a>
  <button class="menu-toggle" aria-label="Toggle navigation">&#9776;</button>

  <div class="navbar-menu">
    <button class="menu-dismiss" aria-label="Dismiss navigation">&times;</button>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

In addition to the markup above, slideout menus require JQuery and the odin.js file. Include the following lines at the end of the body element for each page using the slideout navigation:

  
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script src="path/to/odin.0.11.2.js"></script>

Be sure to that the paths and version numbers are correct for your site's file structure. JQuery must be loaded before the odin.js file. In this example, JQuery is being loaded from a CDN.

A responsive slideout navbar

To make the slideout responsive, use the same markup as above but with one of the following suffixed navbar-slideout classes: navbar-slideout-xs, navbar-slideout-sm, navbar-slideout-md, navbar-slideout-lg, navbar-slideout-xl. The navbar will be displayed as a slideout on the specified viewport size and smaller. On larger viewports, the navbar will be displayed normally. Resize your browser window to see how this works on the example below.

This also requires JQuery and odin.js. See the example above for instructions.

  
<nav class="navbar navbar-slideout-md">
  <a class="navbar-brand" href="#">Site Name</a>
  <button class="menu-toggle" aria-label="Toggle navigation">&#9776;</button>

  <div class="navbar-menu">
    <button class="menu-dismiss" aria-label="Dismiss navigation">&times;</button>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Custom navbar styling

To style a navbar, override the following Odin classes in a custom CSS file. Just be sure the overrides are loaded after the base odin.css file. Look in odin.css to see the base styling for each element. You only need to include override styles for properties that will be different.

  
.navbar {
  background-color: #f72;
}

.navbar-brand {
  color: #fff;
}

.navbar-brand a:link,
.navbar-brand a:visited {

}

.navbar-brand a:hover,
.navbar-brand a:active {

}

.navbar-menu a:link,
.navbar-menu a:visited {
  color: #fff;
}

.navbar-menu a:hover,
.navbar-menu a:active {

}

Styling the slideout menu

By default, the slideout menu will be the same color as the navbar. Override the following Odin classes in a custom CSS file to style your navbar.

  
.navbar-menu.menu-shown {
  background-color: #333;
}

.menu-toggle {
  color: #fff;
}

.menu-dismiss {
  color: #fff;
}

.menu-shown a:link,
.menu-shown a:visited {
  color: #f72;
}

.menu-shown a:active,
.menu-shown a:hover {

}