Create a Sticky Social Media Bar using HTML and CSS

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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
                    contribute.geeksforgeeks.org or mail your article
                    to contribute@geeksforgeeks.org. See your article
                    appearing on the GeeksforGeeks main page and help
                    other Geeks.
                </p>
            </div>
        </center>
    </body>
       
    </html>

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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;
        }
     
        /* Desingning 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>

    chevron_right

    
    

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    
<head>
    <title>Sticky Social Media Bar</title>
      
    <!-- Linking Font-Awesome For the Icons -->
    <link rel="stylesheet" href=
  
    <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;
        }
   
        /* Desingning 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
                contribute.geeksforgeeks.org or mail your article
                to contribute@geeksforgeeks.org. See your article
                appearing on the GeeksforGeeks main page and help
                other Geeks.
            </p>
        </div>
    </center>
</body>
    
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.