Sticky Shrinking Top Bar Nav

By Rafi

How do I use This?

A topbar navigation that is sticky and shrinks to take up less space when sticky.

HTML

<header id="header" class="topbar-sticky-shrink-header">
</header>

<div data-sticky-container>
  <div data-sticky data-margin-top='0' data-top-anchor="header:bottom" data-btm-anchor="content:bottom">
    <div class="top-bar topbar-sticky-shrink">
      <div class="top-bar-title">
        <img src="https://placehold.it/150x38" alt="" />
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">Thing 1</a></li>
          <li><a href="#">Thing 2</a></li>
          <li><a href="#">Thing 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<br />

<div class="column row" id="content">
  <h3 class="text-center">Creating a sticky Navigation Menu with Top Bar!</h3>
  <img src="https://placehold.it/1200x300&text=content/100">
  <img src="https://placehold.it/1200x300&text=content/200">
  <img src="https://placehold.it/1200x300&text=content/300">
  <img src="https://placehold.it/1200x300&text=content/400">
  <img src="https://placehold.it/1200x300&text=content/500">
  <img src="https://placehold.it/1200x300&text=content/600">
</div>

$topbar-sticky-shrink-padding: 2rem; // controls the un-stuck height of topbar
$topbar-sticky-shrink-padding-stuck: 1rem; // controls the is stuck height of topbar
$topbar-sticky-shrink-bg: #2c3840;

.topbar-sticky-shrink {
  padding:$topbar-sticky-shrink-padding;
  transition: padding 0.25s ease;
  background: $topbar-sticky-shrink-bg;

  .menu {
    background: $topbar-sticky-shrink-bg;
  }
}

.is-stuck .topbar-sticky-shrink {
  padding: $topbar-sticky-shrink-padding-stuck;
  transition: padding 0.25s ease;
}

[data-sticky] {
  width: 100%;
}

// for demo only
.topbar-sticky-shrink-header {
  padding: 10rem 0;
  background: url('https://placehold.it/2000x500&text=this is a header') center center no-repeat;
  background-size: cover;
}

.topbar-sticky-shrink {
  padding: 2rem;
  transition: padding 0.25s ease;
  background: #2c3840;
}

.topbar-sticky-shrink .menu {
  background: #2c3840;
}

.is-stuck .topbar-sticky-shrink {
  padding: 1rem;
  transition: padding 0.25s ease;
}

[data-sticky] {
  width: 100%;
}

.topbar-sticky-shrink-header {
  padding: 10rem 0;
  background: url("https://placehold.it/2000x500&text=this is a header") center center no-repeat;
  background-size: cover;
}

Sticky Shrinking Top Bar Nav

By Rafi

Mobile App Bottom Bar

Portfolio Hero Header With Logo

Circular Pagination

Sticky Shrinking Top Bar Nav

By Rafi

Similar Building Blocks

Mobile App Bottom Bar

Portfolio Hero Header With Logo

Circular Pagination