Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a fixed social media icon bar with CSS?
A fixed social media icon bar allows users to access your social media profiles from anywhere on the page. The bar remains visible even when scrolling, making it convenient for visitors to connect with you on different platforms.
Syntax
.social-bar {
position: fixed;
top: value;
left/right: value;
}
Example
The following example creates a fixed social media icon bar that stays positioned on the left side of the page −
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1000;
background: #fff;
border-radius: 0 10px 10px 0;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.social-icon {
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 20px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #1da1f2;
}
.linkedin {
background: #0077b5;
}
.instagram {
background: #e4405f;
}
.social-icon:hover {
transform: translateX(10px);
box-shadow: 2px 0 15px rgba(0,0,0,0.3);
}
.content {
margin-left: 100px;
padding: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="social-bar">
<a href="#" class="social-icon facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="social-icon instagram">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="content">
<h1>Fixed Social Media Bar Demo</h1>
<p>This is a demonstration of a fixed social media icon bar. The icons remain visible on the left side of the page even when you scroll. Try hovering over the icons to see the hover effect.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Scroll down to see how the social media bar stays fixed in position...</p>
<br><br><br><br><br><br><br><br><br><br>
<p>More content to demonstrate scrolling behavior. The social media icons should remain visible and accessible.</p>
</div>
</body>
</html>
A fixed social media icon bar appears on the left side of the page with Facebook, Twitter, LinkedIn, and Instagram icons. The icons have a smooth slide-out animation on hover and remain visible when scrolling through the page content.
Key Properties Explained
- position: fixed − Keeps the bar in a fixed position relative to the viewport
- top: 50% − Positions the bar vertically centered on the page
- transform: translateY(-50%) − Centers the bar perfectly using CSS transform
- z-index: 1000 − Ensures the bar appears above other page elements
- transition − Creates smooth hover animations
Conclusion
A fixed social media icon bar enhances user engagement by providing constant access to your social profiles. The combination of position: fixed and hover effects creates an attractive, functional navigation element that improves the overall user experience.
Updated on: 2026-03-15T14:22:39+05:30
589 Views
Advertisements