How to Create Sticky Social Media Floating Sidebar with CSS


Social Media takes an important part of your online business to reach more customers. Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, sticky social bar surely increases the social media followers of your website and helps to drive traffic to your website. In this tutorial, we are going to create a sticky social media buttons bar with CSS without impacting website design.

You can find many jQuery plugins for floating sidebar, but it may impact your site speed and design. To overcome this issue, we’ll provide a simple CSS code to add animated sticky social bar at the left/right side of your website. You can add this social media floating sidebar with smooth hover over animation using CSS.

In this example code, we’ll implement a social share button bar at the right side with pure CSS. In this social bar, some of the most popular social media links will be included – Facebook, Twitter, Google+, LinkedIn, YouTube, and Pinterest.

HTML Code

Placed the following HTML in the <body> element of the web page, and add your social profile links to the respective social icons.

<div class="sticky-container">
    <ul class="sticky">
        <li>
            <img src="images/facebook-circle.png" width="32" height="32">
            <p><a href="https://www.facebook.com/codexworld" target="_blank">Like Us on<br>Facebook</a></p>
        </li>
        <li>
            <img src="images/twitter-circle.png" width="32" height="32">
            <p><a href="https://twitter.com/codexworldblog" target="_blank">Follow Us on<br>Twitter</a></p>
        </li>
        <li>
            <img src="images/gplus-circle.png" width="32" height="32">
            <p><a href="https://plus.google.com/codexworld" target="_blank">Follow Us on<br>Google+</a></p>
        </li>
        <li>
            <img src="images/linkedin-circle.png" width="32" height="32">
            <p><a href="https://www.linkedin.com/company/codexworld" target="_blank">Follow Us on<br>LinkedIn</a></p>
        </li>
        <li>
            <img src="images/youtube-circle.png" width="32" height="32">
            <p><a href="http://www.youtube.com/codexworld" target="_blank">Subscribe on<br>YouYube</a></p>
        </li>
        <li>
            <img src="images/pin-circle.png" width="32" height="32">
            <p><a href="https://www.pinterest.com/codexworld" target="_blank">Follow Us on<br>Pinterest</a></p>
        </li>
    </ul>
</div>

CSS Code

The following short CSS is enough to implement a Sticky Social Icons bar to your website. Pleace this CSS in the <head> section of the web page.

.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}

Conclusion

Here we’ve added only some most popular social icons to the sticky social bar, you can add other social media icons or useful links based on your requirement.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Recommended Tutorials For You

Leave a reply

CONNECT WITH CODEXWORLD