<ul class="social-list">
  <li><a href="#" target="_blank"><img alt="" src="https://media.cmsmax.com/z9nffgw2iikemioysbbyh/icon-facebook.png" /></a></li>
  <li><a href="#" target="_blank"><img alt="" src="https://media.cmsmax.com/z9nffgw2iikemioysbbyh/icon-instagram.png" /></a></li>
  <li><a href="#" target="_blank"><img alt="" src="https://media.cmsmax.com/z9nffgw2iikemioysbbyh/icon-linkedin.png" /></a></li>
  <li><a href="#" target="_blank"><img alt="" src="https://media.cmsmax.com/z9nffgw2iikemioysbbyh/icon-youtube.png" /></a></li>


Add the following sytles in the styles section under template:

.social-list {
   display: none;
   @media (min-width: 768px) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 10000;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: #231f20;
    margin: 0;
    padding: 8px 5px;
    list-style: none;
   &--active {
    left: 0;
   &>li {
    transition: transform .5s ease-in-out;
   &>li:focus {
   transform: scale(1.1);
   transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
   &>li>a>img {
   height: 40px;
   &>li+li {
   margin-top: 5px;

Building Relationships with Web Developers and Marketing Agencies that want better results

The world's fastest and most SEO friendly website code.