Add the following code into extra.less
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.
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">
<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="fab fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com/#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>