Responsive Sticky Menu

By Paul Vincent Beigang

How do I use This?

A menu component which is sticky (medium and up screen sizes by default) and responsive. FOUC prevention included. The whole bunch of demo content is to there just to show the sticky effect.

HTML

<div data-sticky-container>
  <div data-sticky data-options="marginTop:0;">

    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle="example-menu"></button>
      <div class="title-bar-title">Menu</div>
    </div>

    <div class="top-bar" id="example-menu">
      <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
        <li class="menu-text">Site Title</li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical nested">
            <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>
</div>

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

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

.sticky-container {
  z-index: 5;
}

@media screen and (max-width: 39.9375em) {
  .no-js .top-bar {
    display: none;
  }
}

@media print, screen and (min-width: 40em) {
  .no-js .title-bar {
    display: none;
  }
}

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

.sticky-container {
  z-index: 5;
}

Responsive Sticky Menu

By Paul Vincent Beigang

Mobile App Bottom Bar

Portfolio Hero Header With Logo

Sticky Top Bar

Responsive Sticky Menu

By Paul Vincent Beigang

Similar Building Blocks

Mobile App Bottom Bar

Portfolio Hero Header With Logo

Sticky Top Bar