"Social Media Sidebar"
Bootstrap 3.3.0 Snippet by itsrajverma

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <aside id="sticky-social"> <ul> <li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li> <li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li> <li><a href="#" class="entypo-gplus" target="_blank"><span>Google+</span></a></li> <li><a href="#" class="entypo-linkedin" target="_blank"><span>LinkedIn</span></a></li> <li><a href="#" class="entypo-instagrem" target="_blank"><span>Instagram</span></a></li> <li><a href="#" class="entypo-stumbleupon" target="_blank"><span>StumbleUpon</span></a></li> <li><a href="#" class="entypo-pinterest" target="_blank"><span>Pinterest</span></a></li> <li><a href="#" class="entypo-flickr" target="_blank"><span>Flickr</span></a></li> <li><a href="#" class="entypo-tumblr" target="_blank"><span>Tumblr</span></a></li> </ul> </aside>
@import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: "entypo", sans-serif; } a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .container { margin: 0 auto; padding: 20px 50px; background: white; } #sticky-social { left: 0; position: fixed; top: 150px; } #sticky-social a { background: #333; color: #fff; display: block; height: 35px; font: 16px "Open Sans", sans-serif; line-height: 35px; position: relative; text-align: center; width: 35px; } #sticky-social a span { line-height: 35px; left: -120px; position: absolute; text-align:center; width:120px; } #sticky-social a:hover span { left: 100%; } #sticky-social a[class*="facebook"], #sticky-social a[class*="facebook"]:hover, #sticky-social a[class*="facebook"] span { background: #3b5998; } #sticky-social a[class*="twitter"], #sticky-social a[class*="twitter"]:hover, #sticky-social a[class*="twitter"] span { background: #00aced; } #sticky-social a[class*="gplus"], #sticky-social a[class*="gplus"]:hover, #sticky-social a[class*="gplus"] span { background: #dd4b39; } #sticky-social a[class*="linkedin"], #sticky-social a[class*="linkedin"]:hover, #sticky-social a[class*="linkedin"] span { background: #007bb6; } #sticky-social a[class*="instagrem"], #sticky-social a[class*="instagrem"]:hover, #sticky-social a[class*="instagrem"] span { background: #517fa4; } #sticky-social a[class*="stumbleupon"], #sticky-social a[class*="stumbleupon"]:hover, #sticky-social a[class*="stumbleupon"] span { background: #eb4924; } #sticky-social a[class*="pinterest"], #sticky-social a[class*="pinterest"]:hover, #sticky-social a[class*="pinterest"] span { background: #cc2127; } #sticky-social a[class*="flickr"], #sticky-social a[class*="flickr"]:hover, #sticky-social a[class*="flickr"] span { background: #ff0084; } #sticky-social a[class*="tumblr"], #sticky-social a[class*="tumblr"]:hover, #sticky-social a[class*="tumblr"] span { background: #32506d; }

Related: See More


Questions / Comments: