Hello readers, Today in this blog you’ll learn how to create Fixed Social Media Share Widget using HTML and CSS only. Previously I have shared a Pure CSS Responsive Cards Design with Hover Effect, now it’s time to create a Fixed Social Media Share Widget using only HTML & CSS.
Fixed Social Media Sidebar Widget which commonly used by many websites or blogs. This is a kind of WordPress plugin that builds the same type of social sharing widget. You will see mostly that kind of sharing button on many websites because this design is the default form of several plugins.
As you can see in the image, this is a fixed sidebar social media share widget using only HTML & CSS. In the image, you can see there are some social icons and one background image. All icons color by default their logo color, When you hover on it, the specific icon expands smoothly to show or informing which network it is.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Fixed Social Media Sidebar Widget).
Video Tutorial of Fixed Sidebar Social Media Share
I hope you understood the basic codes and concepts of this design. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this Fixed Sidebar Social Media Share Widget.
If you like this program (Fixed Social Media Sidebar Widget) and want to get the source codes of this widget. You can easily get it from the download link which is given below.
Fixed Social Media Share Widget [Source Codes]
To create this program (Fixed Social Media Sidebar Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Floating Icons on Left Border</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a></li>
<li><a href="#"><i class="fab fa-github"></i><span>Github</span></a></li>
<li><a href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a></li>
</ul>
</nav>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
background: url(bg.jpeg);
background-position: center;
background-size: cover;
height: 100vh;
}
nav{
position: fixed;
width: 70px;
margin-top: 150px;
transition: all 0.3s linear;
box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
nav li{
height: 60px;
position:relative;
}
nav li a{
color: white;
display: block;
height: 100%;
width: 100%;
line-height: 60px;
padding-left:25%;
border-bottom: 1px solid rgba(0,0,0,.4);
transition: all .3s linear;
}
nav li:nth-child(1) a{
background: #4267B2;
}
nav li:nth-child(2) a{
background: #1DA1F2;
}
nav li:nth-child(3) a{
background: #E1306C;
}
nav li:nth-child(4) a{
background: #2867B2;
}
nav li:nth-child(5) a{
background: #333;
}
nav li:nth-child(6) a{
background: #ff0000;
}
nav li a i{
position:absolute;
top: 17px;
left: 20px;
font-size: 27px;
}
ul li a span{
display: none;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
a:hover {
z-index:1;
width: 200px;
border-bottom: 1px solid rgba(0,0,0,.5);
box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
ul li:hover a span{
padding-left: 30%;
display: block;
}
That’s all, now you’ve successfully created a Fixed Social Media Sidebar Widget using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Bro thanks for sharing. Please let me know that are you using Free Rank Math or Premium one.
I’m using Rank Math Free Plan
Bro can you give me a code that when you click the logo you will ve redirected to the site example Facebook
Keep it Up
Okay, I’ll do that. Keep visiting.
Sure stay tuned with us 🙂
Bro plz make video on responsive sticky navbar with multi-level dropdown and animation with animated search bar and buttons. Its my sincere request
Contact me on Instagram.
Great tutorial – having an issue as it is conflicting with current nav menu on page.
I am having the same issue too I already have the nav element for menus in the website, using another nav may conflict. I tried to use the div tag and created a class on it but when I try to style the nth-child() I am getting an error I don’t know why? Does the background color spread to all nth-child ????
For further help you can contact me on Instagram.
yes you can change the nav tag with any other tag but remember to change that tag name in css file too.
Hello, thx for your code / tutorial.
but i run into a problem when using it.
if i insert you css code, my whole homepage layout get's destroyed. is there a way to use it with div or something like this instead of nav?
im new to html etc, so sorry if it's a dumb question 🙂
best regards