Add the following code into extra.less
CSS:
.social-network {
font-size: 0;
line-height: 0;
letter-spacing: -4px;
padding: 10px 0;
text-align: center;
li {
display: inline-block;
vertical-align: text-top;
font-size: 15px;
line-height: 28px;
letter-spacing: 0;
padding: 0 4px;
text-transform: uppercase;
font-weight: 600;
a {
display: block;
width: 30px;
height: 30px;
color: #FFF;
background:#58819F;
border-radius: 4px;
&:after {
content: " ";
display: block;
clear: both;
box-sizing: inherit;
transition: transform 0.4s linear 0s,
border-top-left-radius 0.1s linear 0s,
border-top-right-radius 0.1s linear 0.1s,
border-bottom-right-radius 0.1s linear 0.2s,
border-bottom-left-radius 0.1s linear 0.3s;
}
}
a.youtube:hover {
background-color: #bb0000;
transform: rotate(360deg);
border-radius: 50%;
}
a.facebook:hover {
background-color: #3b5998;
transform: rotate(360deg);
border-radius: 50%;
}
a.twitter:hover {
background-color: #00aced;
transform: rotate(360deg);
border-radius: 50%;
}
a.instagram:hover {
background-color: #bc2a8d;
transform: rotate(360deg);
border-radius: 50%;
}
}
&:after {
content: " ";
display: block;
clear: both;
box-sizing: inherit;
}
}
}
Go to Ad Management and add new ad. Select the ad position as HEADAR on all pages and add the code below and edit the links according to you.
HTML:
<ul class="social-network">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<li><a class="youtube" href="https://www.youtube.com/channel/#" target="_blank"><i class="fab fa-youtube"></i></a></li>
<li><a class="facebook" href="https://www.facebook.com/#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="twitter" href="https://twitter.com/#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com/#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>