Create a Sticky Social Media Bar using HTML and CSS

Last Updated : 25 Jul, 2024

Build a Sticky Social Media Bar with HTML and CSS, integrating Font Awesome icons for stylish and functional social links. Utilize CSS positioning to ensure the bar stays visible while users scroll, enhancing website engagement and accessibility.

Approach

Create a basic site structure of an HTML file and also attach the CDN link of the Font-Awesome for the icons which will be used as a sticky social media bar.
The CSS file styles the icons, positions them fixed to the right side of the viewport, and adjusts their appearance on hover.
Social media icons are centered vertically and aligned to the right side of the viewport using positioning and transformation properties.
Each icon is given a background color corresponding to its platform, with white text for contrast.

Example: The example below shows how to Create a Sticky Social Media Bar using HTML and CSS.

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">
    <link rel="stylesheet" href="style.css">
</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 [email protected]. 
                  See your article appearing on the GeeksforGeeks
                  main page and help other Geeks.
            </p>
        </div>
    </center>
</body>

</html>

CSS

.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;
}

Output:

How to create Right Aligned Menu Links using HTML and CSS ?

Sabya_Samadder

Improve

Article Tags :

Create a Sticky Social Media Bar using HTML and CSS

Approach

Similar Reads

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5

HTML 5 MathML

HTML Course

Thank You!

What kind of Experience do you want to share?