Responsive Nav with Social

By Laurel Beyers

top bar navigation nav social menu sticky icons

How do I use This?

A responsive sticky navigation with social icons.

HTML

<!-- Use these stylesheets for icons and typography in head of your HTML doc if you want :) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">


<!-- Start of body below -->

<div class="responsive-nav-social-mobile" data-responsive-toggle="responsive-nav-social" data-hide-for="medium">
  <div class="responsive-nav-social-mobile-left">
    <ul class="menu">
      <li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
      <li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
      <li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    </ul>
  </div>
  <div class="responsive-nav-social-mobile-right">
    <button class="menu-icon" type="button" data-toggle="responsive-nav-social"></button>
  </div>
</div>

<div data-sticky-container>
  <div class="responsive-nav-social" id="responsive-nav-social" data-sticky data-options="marginTop:0;">
    <div class="row align-justify align-middle" id="responsive-menu">
      <div class="responsive-nav-social-left">
        <ul class="menu vertical medium-horizontal">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Travel</a></li>
          <li><a href="#">Eat</a></li>
          <li><a href="#">Relax</a></li>
          <li><a href="#">Videos</a></li>
        </ul>
      </div>
      <div class="responsive-nav-social-right hide-for-small-only">
        <ul class="menu">
          <li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
          <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
          <li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

$highlight-color: #4ec6cd;
$nav-padding: 1rem;
$nav-text-color: $dark-gray;
$nav-bg-color: lighten($nav-text-color, 30%);

.responsive-nav-social-mobile {
  background: $nav-bg-color;
  display: flex;
  align-items: center;
  width: 100%;

  .responsive-nav-social-mobile-left {
    flex: 1 0 0;

    li {
      font-size: 1.5rem;

      .fa {
        color: $nav-text-color;
        margin-right: -0.7rem;
      }
    }
  }

  .responsive-nav-social-mobile-right {
    .menu-icon {
      margin-right: $nav-padding;

      &::after {
        padding-right: 1.5rem;
        background: $highlight-color;
        box-shadow: 0 7px 0 $highlight-color, 0 14px 0 $highlight-color;
      }
    }
  }
}

.responsive-nav-social {
  padding: $nav-padding;
  background-color: $nav-bg-color;

   &.is-stuck {
    width: 100%;
    box-shadow: 0px 4px 10px -2px rgba(128,128,128,0.68);
   }

   a {
     color: $nav-text-color;
     font-size: 0.8rem;

     &:hover {
       color: $highlight-color;
       transition: color 0.2s ease-in;
     }
  }

  @include breakpoint (small only) {
    .menu li a {
       font-size: 1.5rem;
       padding: 1.5rem;
       color: $highlight-color;
     }

     li {
        border-bottom: 3px solid $highlight-color;

        &:last-of-type {
          border: 0;
       }
     }

     .responsive-nav-social-left {
       width: 100%;

       .menu.vertical a {
        justify-content: center;
       }
     }
   }

  .responsive-nav-social-right {
    a {
      padding-right: 0.1rem;
    }
  }

  i.fa {
    font-size: 1.3rem;
    color: $nav-text-color;

       &:hover {
       color: $highlight-color;
       transition: color 0.2s ease-in;
     }
  }
}

.sticky-container {
  width: 100%;
}

.responsive-nav-social-mobile {
  background: #d7d7d7;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.responsive-nav-social-mobile .responsive-nav-social-mobile-left {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.responsive-nav-social-mobile .responsive-nav-social-mobile-left li {
  font-size: 1.5rem;
}

.responsive-nav-social-mobile .responsive-nav-social-mobile-left li .fa {
  color: #8a8a8a;
  margin-right: -0.7rem;
}

.responsive-nav-social-mobile .responsive-nav-social-mobile-right .menu-icon {
  margin-right: 1rem;
}

.responsive-nav-social-mobile .responsive-nav-social-mobile-right .menu-icon::after {
  padding-right: 1.5rem;
  background: #4ec6cd;
  box-shadow: 0 7px 0 #4ec6cd, 0 14px 0 #4ec6cd;
}

.responsive-nav-social {
  padding: 1rem;
  background-color: #d7d7d7;
}

.responsive-nav-social.is-stuck {
  width: 100%;
  box-shadow: 0px 4px 10px -2px rgba(128, 128, 128, 0.68);
}

.responsive-nav-social a {
  color: #8a8a8a;
  font-size: 0.8rem;
}

.responsive-nav-social a:hover {
  color: #4ec6cd;
  transition: color 0.2s ease-in;
}

@media screen and (max-width: 39.9375em) {
  .responsive-nav-social .menu li a {
    font-size: 1.5rem;
    padding: 1.5rem;
    color: #4ec6cd;
  }
  .responsive-nav-social li {
    border-bottom: 3px solid #4ec6cd;
  }
  .responsive-nav-social li:last-of-type {
    border: 0;
  }
  .responsive-nav-social .responsive-nav-social-left {
    width: 100%;
  }
  .responsive-nav-social .responsive-nav-social-left .menu.vertical a {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.responsive-nav-social .responsive-nav-social-right a {
  padding-right: 0.1rem;
}

.responsive-nav-social i.fa {
  font-size: 1.3rem;
  color: #8a8a8a;
}

.responsive-nav-social i.fa:hover {
  color: #4ec6cd;
  transition: color 0.2s ease-in;
}

.sticky-container {
  width: 100%;
}

Responsive Nav with Social

By Laurel Beyers

Responsive Sticky Menu

Multi-level Offcanvas Menu

Menu with Hover Borders

Responsive Nav with Social

By Laurel Beyers

Similar Building Blocks

Responsive Sticky Menu

Multi-level Offcanvas Menu

Menu with Hover Borders