Create a Sticky Social Media Bar using HTML and CSS

27 Sep, 2021
To create a sticky social media bar on any website HTML and CSS are used. If you want to attach the icons with the sticky social media then you need a font-awesome CDN link. These days social media is the best platform to advertise your stuff. Social media, where you can inform the client or the user about your product easily, the user can share the details of the product on their social media account if they like your product. So creating a sticky Social Media bar sometimes makes your site slower (if you are using jQuery plugins for the Sticky Social Media Bar). In this article, you will get to know how to attach a sticky Social Media bar on your website. This article is divided into two sections Creating Structure and Designing Structure. 
Glimpse of complete Sticky Social Media Bar: 
Creating Structure: In this section we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a sticky social media bar. 
CDN links for the Icons from the Font Awesome: 
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML code to make the structure:
HTML
<!DOCTYPE html><html>  <head>    <title>Sticky Social Media Bar</title></head>  <body>    <center>        <h3>Sticky Social Media Bar</h3>          <!-- Icons for the sticky Social Bar -->        <div class="body-part">            <div class="icon-list">                <a href="#instagram" class="instagram">                    <i class="fa fa-instagram"></i>                </a>                                 <a href="#facebook" class="facebook">                    <i class="fa fa-facebook"></i>                </a>                                 <a href="#twitter" class="twitter">                    <i class="fa fa-twitter"></i>                </a>                                 <a href="#linkedin" class="linkedin">                    <i class="fa fa-linkedin"></i>                </a>                                 <a href="#google" class="google">                    <i class="fa fa-google"></i>                </a>                                 <a href="#youtube" class="youtube">                    <i class="fa fa-youtube"></i>                </a>            </div>              <!-- Content of the Page -->            <h2>GeeksforGeeks</h2>                          <p>                An IIT Roorkee alumnus and founder of GeeksforGeeks.                He loves to solve programming problems in most                efficient ways. Apart from GeeksforGeeks, he has                worked with DE Shaw and Co. as a software developer                and JIIT Noida as an assistant professor.            </p>                           <p>                Only the zeal to learn and improve yourself is all                we need. Anyone who has a passion for learning and                writing is welcome to write for us. Contribution                on GeeksforGeeks is not limited to writing articles                only, below are the details about the ways in which                you can help us and other fellow programmers:            </p>                           <p>                If you like GeeksforGeeks and would like to                contribute, you can also write an article using                write.geeksforgeeks.org or mail your article                to review-team@geeksforgeeks.org. See your article                appearing on the GeeksforGeeks main page and help                other Geeks.            </p>         </div>    </center></body>  </html>
Designing Structure: In the previous section we have created the structure of the basic website where we are going to use sticky social media bars. In this section, we will design the structure and attach the sticky icons of the social media bar. 
CSS code to look good the structure: 
HTML
<style>     /* Styling Body-part */    .body-part {        width: 600px;        height: 200px;        border: 3px solid black;        overflow: auto;    }         h2 {        color: green;    }         /* Justifying Content text */    p {        text-align: justify;        margin: 40px;    }         /* Styling icons */    .icon-list {        position: fixed;        top: 242px;        right:40%;        transform: translateY(-50%);             }         .icon-list a {        display: block;        text-align: center;        padding: 8px;        transition: all 0.5s ease;        color: white;        font-size: 20px;        float:right;    }          /* HOver affect on icons */    .icon-list a:hover {        color: #000;        width:50px;    }     /* Designing each icons */    .instagram {        background: #3f729b;        color: white;    }         .facebook {        background: #3b5998;        color: white;    }         .twitter {        background: #00acee;        color: white;    }    .linkedin {        background: #0e76a8;        color: white;    }         .google {        background: #db4a39;        color: white;    }         .youtube {        background: #c4302b;        color: white;    }</style>
Combine the HTML and CSS code: This is the final code after combining the above two sections. It will create a sticky social media bar of a website.
HTML
<!DOCTYPE html><html>   <head>    <title>Sticky Social Media Bar</title>         <!-- Linking Font-Awesome For the Icons -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     <style>          /* Styling Body-part */        .body-part {            width: 600px;            height: 200px;            border: 3px solid black;            overflow: auto;        }                  h2 {            color: green;        }                  /* Justifying Content text */        p {            text-align: justify;            margin: 40px;        }                  /* Styling icons */        .icon-list {            position: fixed;            top: 242px;            right:40%;            transform: translateY(-50%);                      }                  .icon-list a {            display: block;            text-align: center;            padding: 8px;            transition: all 0.5s ease;            color: white;            font-size: 20px;            float:right;        }                   /* HOver affect on icons */        .icon-list a:hover {            color: #000;            width:50px;        }          /* Designing each icons */        .instagram {            background: #3f729b;            color: white;        }                  .facebook {            background: #3b5998;            color: white;        }                  .twitter {            background: #00acee;            color: white;        }        .linkedin {            background: #0e76a8;            color: white;        }                  .google {            background: #db4a39;            color: white;        }                  .youtube {            background: #c4302b;            color: white;        }    </style></head>   <body>    <center>        <h3>Sticky Social Media Bar</h3>           <!-- Icons for the sticky Social Bar -->        <div class="body-part">            <div class="icon-list">                <a href="#instagram" class="instagram">                    <i class="fa fa-instagram"></i>                </a>                                  <a href="#facebook" class="facebook">                    <i class="fa fa-facebook"></i>                </a>                                  <a href="#twitter" class="twitter">                    <i class="fa fa-twitter"></i>                </a>                                  <a href="#linkedin" class="linkedin">                    <i class="fa fa-linkedin"></i>                </a>                                  <a href="#google" class="google">                    <i class="fa fa-google"></i>                </a>                                  <a href="#youtube" class="youtube">                    <i class="fa fa-youtube"></i>                </a>            </div>               <!-- Content of the Page -->            <h2>GeeksforGeeks</h2>                           <p>                An IIT Roorkee alumnus and founder of GeeksforGeeks.                He loves to solve programming problems in most                efficient ways. Apart from GeeksforGeeks, he has                worked with DE Shaw and Co. as a software developer                and JIIT Noida as an assistant professor.            </p>                            <p>                Only the zeal to learn and improve yourself is all                we need. Anyone who has a passion for learning and                writing is welcome to write for us. Contribution                on GeeksforGeeks is not limited to writing articles                only, below are the details about the ways in which                you can help us and other fellow programmers:            </p>                            <p>                If you like GeeksforGeeks and would like to                contribute, you can also write an article using                write.geeksforgeeks.org or mail your article                to review-team@geeksforgeeks.org. See your article                appearing on the GeeksforGeeks main page and help                other Geeks.            </p>         </div>    </center></body>   </html>
Output: 
 
arorakashish0911
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property