How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
Sticky Social Bar
How To, for Web Applications
By: Chrysanthus Date Published: 6 Apr 2025
This tutorial explains How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons.
The complete webpage code is given at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but ending with .html . Open the file in the browser. Scroll down and up and note that the social media bar is stuck to the left edge of the webpage. Hover over the different social media icons and click some. When an icon is clicked, the corresponding website will not open, because the URLs are not effective. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The code for the webpage skeleton, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Social Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage, has at least the first four tags in the HTML head element above. The fifth tag is a link element and should not be confused with the hyperlink, which is normally found in the HTML body element. This rel-link imports the library, font-awesome/4.7.0 from the website, cloudflare.com . This library has the social media icons. The HTML style element will have all the CSS rules for the social media icons, that are supposed to be produced by the web developer (programmer). The HTML script element will be left empty. The HTML body element will have the anchor elements whose contents will be the icons.
The HTML body Element Content
The content of the body element is:
<div class="icon-bar">
<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="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<div style="margin-left: 75px; font-size: 30px;">
<h2>Sticky Social Bar</h2>
<p>The sticky social bar will stick to the screen when you scroll.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
|
|
|
</div>
There are two div elements. The first one will be styled into the vertical bar, with the social media icons. The second one has the main document content for the page. The left edge of the sticky vertical bar, will align with the left edge of the webpage. So the second main content div is given a left margin of 75px, so that the social media bar should not cover any of its text (content). This is done in the div's attribute, "style='margin-left: 75px; font-size: 30px;'" .
The anchor element is the code for the hyperlink. The first div, whose class-name is "icon-bar", has five anchor elements. The href value for each anchor element is just "#", so that when the icon (anchor element) is clicked, no webpage should be loaded, because this is just a teaching project. Each anchor element has the class attribute, whose value is the name of the social media. Each of these names is part of the selector of a CSS rule written in the HTML style element above (see below for details).
The content of each anchor element is the i element. There is no content for each of these i elements. However, each of these i elements has a class attribute, whose value consists of two words. The first word is the same for all the different i values, and refers to a CSS rule in the imported font-awesome/4.7.0 library. The second word is different for the different i elements, and refer to different CSS rules in the font-awesome/4.7.0 library. The combination pair of words, identifies a particular social media icon, in the font-awesome/4.7.0 library.
Each icon here, is not an image file; it is the i element twisted into a glyph like an uppercase character, by CSS rules in the font-awesome/4.7.0 library. The background of each rectangle for a glyph, will become the same background of the anchor element.
Remember: clicking the icon element is the same as clicking its anchor element, in this project.
Content of the HTML Style Element
When the icons are downloaded into the webpage, they are like uppercase characters, and all CSS properties applicable to uppercase characters, are applicable to them.
Styling the body Element
The CSS rule for the body element is:
body {margin:0; height:2000px;}
The four margins of the body element is 0. With this, the left edge of the sticky vertical bar, will align (glued) with the left edge of the webpage. The 2000px height is not really necessary. It is just there to make the webpage long, so that it can be scrolled down and up.
Styling the Sidebar
The div.icon-bar is the sidebar. The CSS rule for it is:
div.icon-bar {
position: fixed;
top: 35%;
}
It has a fixed position, so that it goes in front of the second div for the main document content. Actually, it goes in front of the left margin of the second div. For this project, its top end is 35% down the top end of the webpage. With its fixed position and being in front of the left margin of the second div, the webpage can be scrolled down and up, and the sidebar will remain stuck.
Style for all the Anchor Elements
The following CSS rule is applicable to each of the anchor elements:
div.icon-bar a {
display: block;
padding: 16px;
text-align: center;
color: white;
font-size: 20px;
}
Note that each anchor element is addressed in the selector, through their container div with class-name, icon-bar. The display for each of the anchor elements is block. This means that as the anchor elements are typed next to one another, they will appear one below the other, at the browser. That gives a vertical presentation. The four padding for each anchor element is 16px. Within each anchor element rectangle, the icon is horizontally center aligned, because of the property, "text-align: center;" . The icon can be considered as a glyph. The color of each icon glyph is white. The font-size of each icon glyph is 20px.
Background Color and Glyph Color for Icons
The background color for the different icons are different. The glyph color for the different icons is white. They are given by the following CSS rules:
div.icon-bar .facebook {
background-color: #3B5998;
color: white;
}
div.icon-bar .twitter {
background-color: #55ACEE;
color: white;
}
div.icon-bar .google {
background-color: #dd4b39;
color: white;
}
div.icon-bar .linkedin {
background: #007bb5;
color: white;
}
div.icon-bar .youtube {
background: #bb0000;
color: white;
}
Each anchor element is identified by its class-name, given in the class attribute in the body element. The background color of the rectangle that has the glyph, is the same as the background color of the anchor element.
Anchor Element On-hover
When the mouse pointer goes over an icon, it equally goes over the icon's anchor element. With that the background color of the anchor element, which is the same as the background of the icon's glyph (rectangle), becomes black. The CSS rule is:
div.icon-bar a:hover {
background-color: #000;
}
The Complete Code for the Webpage
And there you have it: the complete code for the webpage is:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Social Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0; height:2000px;}
div.icon-bar {
position: fixed;
top: 35%;
}
div.icon-bar a {
display: block;
padding: 16px;
text-align: center;
color: white;
font-size: 20px;
}
div.icon-bar .facebook {
background-color: #3B5998;
color: white;
}
div.icon-bar .twitter {
background-color: #55ACEE;
color: white;
}
div.icon-bar .google {
background-color: #dd4b39;
color: white;
}
div.icon-bar .linkedin {
background: #007bb5;
color: white;
}
div.icon-bar .youtube {
background: #bb0000;
color: white;
}
div.icon-bar a:hover {
background-color: #000;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="icon-bar">
<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="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<div style="margin-left: 75px; font-size: 30px;">
<h2>Sticky Social Bar</h2>
<p>The sticky social bar will stick to the screen when you scroll.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but ending with .html . Open the file in the browser. Scroll down and up and note that the social media bar is stuck to the left edge of the webpage. Hover over the different social media icons and click some. When an icon is clicked, the corresponding website will not open, because the URLs are not effective.
Chrys