Hello, i’ve read many postings to hide the social icons in Enfold, but its not possible in my website. This is my QuickCSS:
#top .avia-logo-grid .slide-entry-wrap {
margin: 20px !important;
}
#top #wrap_all .av-social-link-lh1 a:before{
content: "";
width: 46px;
height: 60px;
display: inline-block;
vertical-align: middle;
background: url(wp-content/uploads/2017/05/logo.png) no-repeat center center;
background-size: contain;
}
#top #wrap_all .av-social-link-psmfacility a:before{
content: "";
width: 96px !important;
height: 80px;
display: inline-block;
vertical-align: middle;
background: url(wp-content/uploads/2019/01/Logo.png) no-repeat center center;
background-size: contain;
}
#header_main nav .social_bookmarks {
position: relative;
top: 30%;
margin-top: -18px;
right: 0;
overflow: hidden;
clear: none;
float: left;
}
#top .social_bookmarks {
height: 74px;
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -9px;
}
#top .social_bookmarks li a {
float: left;
line-height: 70px;
width: 68px;
display: block;
margin: 0px;
outline: none;
padding: 0;
min-height: 30px;
height: 100%;
overflow: visible;
z-index: 2;
position: relative;
text-align: center;
}
#top .social_bookmarks li {
width: 96px;
}
@media only screen and (max-width: 1080px) {
#header_meta .social_bookmarks {
display:none !important;
}
}