Create a Sticky Social Media Bar using HTML and CSS
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= <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:
Please Login to comment...