Mobile Nav Bar

By Kevin Ball

mobile app navbar

How do I use This?

A simple mobile navigation pattern with hamburger icon, page, and actions

HTML

<div class="mobile-nav-bar title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button"></button>
  </div>
  <div class="title-bar-center">
    <span class="title-bar-text">My Page</span>
  </div>
  <div class="title-bar-right">
    <span class="title-bar-text">Actions</span>
    <span class="title-bar-text"><a href="#"><i class="fa fa-home title-bar-logo"></i></a></span>
  </div>
</div>

.mobile-nav-bar {
  background-color: $primary-color;
  a {
    color: $white;
  }
}

.mobile-nav-bar {
  background-color: #1779ba;
}

.mobile-nav-bar a {
  color: #fefefe;
}

Mobile Nav Bar

By Kevin Ball

Full Screen Off Canvas

Pagination with Pointed Buttons

Ecommerce Footer

Mobile Nav Bar

By Kevin Ball

Similar Building Blocks

Full Screen Off Canvas

Pagination with Pointed Buttons

Ecommerce Footer