PUBLISHED ON: AUGUST 24, 2021
How to create a fixed/sticky social media icon bar with CSS?
The social media icon bar is used to add the links of all the social medial accounts. You can just click on it and it will redirect you to the social media page. It is used in most of the website. This social media bar can be made sticky/fixed to the particular position of the viewport.
In this tutorial, we will learn to create a fixed/sticky social media icon bar with CSS.
Creating a fixed social media icon bar
Take a <div> element and add the social media icon class within <a> tag. The icons are used from the external library. Here, we will add Font Awesome library to do so. Use position: fixed property to create a fixed icon bar, and set the position of the icon bar using left, right, top or bottom properties.
Example: A fixed button icon bar
In this example, we have created a fixed icon bar. The icon bar is fixed at the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
position: fixed;
bottom: 0;
text-align: center;
margin-top: 5px;
width: 100%;
background-color: #cccccc;
}
.container a {
padding: 16px;
font-size: 30px;
text-align: center;
}
.icon-bar a:hover {
background-color: black;;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
</style>
</head>
<body>
<h2> Sticky social media icon bar </h2>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<h3> Scroll below </h3>
<div class="container">
<h3> follow us on </h2>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Fixed social media icon bar
In the example given below, the social media icon bar is fixed at the left-top and an icon bar is aligned vertically.
Conclusion
In this tutorial, we have learned to create a fixed social media icon bar. Here, we have fixed it at the bottom and at the left-top. Use position:fixed property for it.
