[CSS Customizations] How to center the logo

[sipahi]

Hello,

I’m not using top menu and toggle button so I want to relocate my logo to the center (there are only left and right options). How can I do that?

Thank you!

• This topic was modified 7 years, 2 months ago by Jason Bobich. Reason: Changed title to match similar topics from other theme forums

Topic

[Jason Bobich]

Hi,

There is no option for this and would only be possible through your own CSS customization. But I think this is a good snippet to include for everyone, so I’ll go ahead and provide it.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

Center menu on desktops

@media (min-width: 992px) {
    .logo-right .site-header.edgy > .wrap .header-logo,
    .logo-right .site-header.bold > .wrap .header-logo,
    .logo-right .site-header.modern > .wrap .header-logo {
        -webkit-transform: translate(50%, 0);
        transform: translate(50%, 0);
        right: 50%;
    }
    .logo-left .site-header.edgy > .wrap .header-logo,
    .logo-left .site-header.bold > .wrap .header-logo,
    .logo-left .site-header.modern > .wrap .header-logo {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        left: 50%;
    }
}

Center menu on mobile devices (tablets and below)

@media (max-width: 991px) {
    .logo-right .site-header.edgy > .wrap .header-logo,
    .logo-right .site-header.bold > .wrap .header-logo,
    .logo-right .site-header.modern > .wrap .header-logo {
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        right: 50%;
    }
    .logo-left .site-header.edgy > .wrap .header-logo,
    .logo-left .site-header.bold > .wrap .header-logo,
    .logo-left .site-header.modern > .wrap .header-logo {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
    }
}

• This reply was modified 7 years, 2 months ago by Jason Bobich. Reason: Added mobile compatibility

[sipahi]

Hi,

Thanks for answer and solution. I agree, it would be great for update.

[Jason Bobich]

Awesome glad that works for you. I probably wouldn’t add it as an actual option to the theme because it doesn’t really go with the other elements. It’s more useful in a special circumstance like you’re describing, where you’re not using the other elements in the header.

[sipahi]

Actually, you’re right when we think other elements.

Yes, it worked for desktop but made a problem for mobile. Mobile header logo shift down after the code.

Image: http://s8.postimg.org/gnv61ulgl/Screen_Shot_2016_04_03_at_00_21_40.png
I know resolution is bad but subject is position 🙂

Do you have an idea?

[Jason Bobich]

Yeah, see above. I expanded the code snippet. You can center the logo desktops, mobile, or both. If you want both, just include both snippets, as one will not affect the other.

[Author]

Replies