Create a Sticky Social Media Bar using HTML and CSS

Last Updated : 10 Jul, 2023

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:

Suggest improvement

HTML Course Building Footer

Create a Search Bar using HTML and CSS

Share your thoughts in the comments

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5

HTML 5 MathML

HTML Course

HTML Questions

Create a Sticky Social Media Bar using HTML and CSS

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?