Sticky Top Bar

By Brett Mason

F6
#
How do I use This?

A topbar navigation that is sticky. Make sure to set `anchor` to the ID of your page container.

HTML
<div class="top-bar-container" data-sticky-container>
  <div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
          <li class="has-submenu">
            <a href="#">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>
  </div>
</div>
.sticky-topbar {
  width: 100%;
}

.sticky-topbar {
  width: 100%;
}

JS