Categories
CSS Web development

CSS Sticky social media bar

CSS Sticky social media bar

To create the CSS Sticky social media bar follow the steps below:

Demo:

Step1.

Add HTML

Create the sticky-icon-bar container and add preferable social media icons (to see the tutorial, how to create the social media icons/ buttons click here).

<div class="sticky-icon-bar">
  <a href="https://codepen.io/lenasta92579651" class="codepen"><i class="fab fa-codepen"></i></a> 
  <a href="https://twitter.com/lenasta92579651" class="twitter"><i class="fab fa-twitter"></i></a> 
  <a href="https://www.instagram.com/stanleylenablog/" class="instagram"><i class="fab fa-instagram"></i></a> 
  <a href="https://www.youtube.com/channel/UCMtOSqCHykGR3ATq5nwBhSw?view_as=subscriber" class="youtube"><i class="fab fa-youtube"></i></a> 
</div>

Add some text (to make a page scrollable):

<div class="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
</div>

Step2.

Add CSS

Import the font-awesome font:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

Set the color and the position of the background and elements:

body {
  margin:0;
  height:150vh;
  background-color: #f9f9f9;
}

Style the text:

.text {
  margin: 80px;
  font-size: 28px;
  text-align: justify;
}

Style the sticky social bar:

To stick the social bar set the position: fixed;

.sticky-icon-bar {
  position: fixed;
  top: 50%;
  box-shadow:5px 0 20px rgba(0,0,0,0.4);
  transform: translateY(-50%);
}

.sticky-icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: #333;
  font-size: 20px;
  background-color: #ffffff;
}

.sticky-icon-bar a:hover {
  background-color: #333;
  color: white;
}

Enjoy coding!