<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>
</ul>
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:hover,
&>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;
}
}
