Center header image and social media icons, add padding

Unite Theme
1

Hello,

I was trying to center the header logo and social media icons like Bubbliez. I put the code in css. It centered the logo but lost the padding and didn’t move the social media icons. Can you help me with those changes? I’ve been really wanting to do this but know it’s complicated.

.site-branding {
margin: 0 auto;
text-align: center;
max-width: 100%;
float: none;
}
.social-header {
width: 100%;
z-index: 100;
margin-top: -150px;
}

jackierutan.net

Thanks,
Jackie

2

Jackie,

Replace your above given code with this one:

.site-branding {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    float: none;
    padding: 30px 0;
}

This will only center logo while leaving social icons in place. Centering social media icons will cause more problems than good on tablets, so I wouldn’t recommend to go that route.

3

:open_mouth:

I’ve tried this but le the social media have been moved. Could you Help me???

cheroot.es

4

it’s posible make bigger the header image?

5

There is no width defined for header image and 450x by 150px is only recommendation and you can use larger images than that. The only size limit is width defined for column but code below addresses it.

@media (min-width: 992px) { /* Tweak social media icons */
    #social {
        margin-right: 30px;
        top: -100px;
    }
    .social-header.col-md-6 { 
        width: 100%;
}
}
.site-branding.col-md-6 { /* Make logo area bigger as it is now set to 50% */
    width: 100%;
}

Add this code to Theme Options - Other - Custom CSS. When you will upload larger image some other changes might be required.