Tagged: centered, enfold, social media icon, top. header
Hi Guys,
I am trying to get my social media icon in the center of my top header. The WPML flags and the Facebook icon both need to be centered. I have tried a lot of css classes but it wont work
.responsive #top #header_meta .social_bookmarks li a {
color: inherit;
border-color: transparent;
background: transparent;
}
#top #wrap_all .social_bookmarks a {
background: transparent;
border-radius: 25px;
margin-top: 0px;
}
#top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
background: white;
border-radius: 20px;
margin-top: 2px;
margin-left: 0px;
}
#top .social_bookmarks li a {
float: left;
width: 30px;
line-height: 30px;
display: block;
margin: 0px;
outline: none;
padding: 0;
min-height: 30px;
height: 100%;
overflow: visible;
z-index: 2;
position: relative;
text-align: center;
}
This is what i have right now on portrait mobile: http://imgur.com/uZCtrl7 and this is on landscape http://imgur.com/LG0bUqa
Also the FB icon is moving around its not centered i dont know how this comes.
Can someone help me out
Hey Angelo,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) {
.responsive #header .social_bookmarks {
width: 30px;
float: left;
}
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
width: 90%;
float: right;
margin-top: 6px;
}}
Best regards,
Yigit