Sticky Social Bar

By Harry Manchanda

How do I use This?

Full CSS only Sticky Social Bar that sticks to the page as someone scrolls through it.

HTML

<!-- You can add more icons at //fontawesome.io/icons/#brand -->
<ul class="sticky-social-bar">
  <li class="social-icon">
    <a href="#"> 
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <span class="social-icon-text">Facebook</span>
    </a>
  </li>
  <li class="social-icon">
    <a href="#">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <span class="social-icon-text">Twitter</span>
    </a>
  </li>
  <li class="social-icon">
    <a href="#">
      <i class="fa fa-linkedin" aria-hidden="true"></i>
      <span class="social-icon-text">Linkedin</span>
    </a>
  </li>
  <li class="social-icon">
    <a href="#">
      <i class="fa fa-youtube" aria-hidden="true"></i>
      <span class="social-icon-text">Youtube</span>
    </a>
  </li>
  <li class="social-icon">
    <a href="#">
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <span class="social-icon-text">Instagram</span>
    </a>
  </li>
  <li class="social-icon">
    <a href="#">
      <i class="fa fa-pinterest-p" aria-hidden="true"></i>
      <span class="social-icon-text">Pinterest</span>
    </a>
  </li> 
</ul>

$social-bar-position: left; // Change this value to `right` for changing sidebar's position.
$social-bar-transformation: rem-calc(140);
$social-bar-width: rem-calc(180);
$social-bar-background: #333333;
$social-icon-color: $white;
$social-icon-transition: all 0.3s ease-in-out;
$social-icon-font-size: 1.1rem;
$social-icon-padding: 0.5rem;

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-youtube: #bb0000;
$social-brand-instagram: #125688;
$social-brand-pinterest: #cb2027;

.sticky-social-bar {
  padding: 0;
  margin: 0; 
  top: 50%;
  transform: translateY(-50%);
  width: $social-bar-width;
  background-color: $social-bar-background;
  position: fixed;
	
  @if $social-bar-position == left {
	  left: $social-bar-transformation * -1;
  }
  @if $social-bar-position == right {
	  right: $social-bar-transformation * -1;
  }

  .social-icon {
    list-style-type: none;
    color: $social-icon-color;
    background-color: inherit;
    margin: 0;
    transition: $social-icon-transition;
    cursor: pointer;
    font-size: $social-icon-font-size;
    padding: 0.25rem 0.25rem 0.5rem;

    &:first-of-type {
	    padding-top: 0.375rem;
    }
    &:last-of-type {
	    padding-bottom: 0.625rem;
    }

    > a {
      color: inherit;
      background-color: inherit;

      > .fa {
        padding: $social-icon-padding;
        width: 2rem;
        height: 2rem;

        @if $social-bar-position == left {
          float: right;
          margin-left: 0.5rem;
        }
        @if $social-bar-position == right {
          float: left;
          margin-right: 0.5rem;
        }

        &.fa-facebook {
          background-color: $social-brand-facebook;
        }
        &.fa-twitter {
          background-color: $social-brand-twitter;
        }
        &.fa-linkedin {
          background-color: $social-brand-linkedin;
        }
        &.fa-youtube {
          background-color: $social-brand-youtube;
        }
        &.fa-instagram {
          background-color: $social-brand-instagram;
        }
        &.fa-pinterest-p {
          background-color: $social-brand-pinterest;
        }
      }

      > .social-icon-text {
        font-size: 80%;
        color: $social-icon-color;
        text-transform: uppercase;

        @if $social-bar-position == left {
          margin-right: 0.5rem;
        }
        @if $social-bar-position == right {
          margin-left: 0.5rem;
        }
      }
    }

    &:hover {

      @if $social-bar-position == left {
        transform:translateX($social-bar-transformation * 1);
      }
      @if $social-bar-position == right {
        transform:translateX($social-bar-transformation * -1);
      }

      > a {
        color: inherit;
        background-color: inherit;
      }
    }
  }
}

.sticky-social-bar {
  padding: 0;
  margin: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 11.25rem;
  background-color: #333333;
  position: fixed;
  left: -8.75rem;
}

.sticky-social-bar .social-icon {
  list-style-type: none;
  color: #fefefe;
  background-color: inherit;
  margin: 0;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0.25rem 0.5rem;
}

.sticky-social-bar .social-icon:first-of-type {
  padding-top: 0.375rem;
}

.sticky-social-bar .social-icon:last-of-type {
  padding-bottom: 0.625rem;
}

.sticky-social-bar .social-icon > a {
  color: inherit;
  background-color: inherit;
}

.sticky-social-bar .social-icon > a > .fa {
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  float: right;
  margin-left: 0.5rem;
}

.sticky-social-bar .social-icon > a > .fa.fa-facebook {
  background-color: #3b5998;
}

.sticky-social-bar .social-icon > a > .fa.fa-twitter {
  background-color: #55acee;
}

.sticky-social-bar .social-icon > a > .fa.fa-linkedin {
  background-color: #007bb5;
}

.sticky-social-bar .social-icon > a > .fa.fa-youtube {
  background-color: #bb0000;
}

.sticky-social-bar .social-icon > a > .fa.fa-instagram {
  background-color: #125688;
}

.sticky-social-bar .social-icon > a > .fa.fa-pinterest-p {
  background-color: #cb2027;
}

.sticky-social-bar .social-icon > a > .social-icon-text {
  font-size: 80%;
  color: #fefefe;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.sticky-social-bar .social-icon:hover {
  -webkit-transform: translateX(8.75rem);
      -ms-transform: translateX(8.75rem);
          transform: translateX(8.75rem);
}

.sticky-social-bar .social-icon:hover > a {
  color: inherit;
  background-color: inherit;
}

Sticky Social Bar

By Harry Manchanda

Circular Pagination

Topbar Mega-menu Dropdown

Ecommerce Footer

Sticky Social Bar

By Harry Manchanda

Similar Building Blocks

Circular Pagination

Topbar Mega-menu Dropdown

Ecommerce Footer