Center the logo on mobile

[rotation]

how can I Center the logo on mobile and move it closer to the social media icons ?

[jade]

Hello @rotation,

Please add this code in X > Theme Options > CSS:

@media (max-width: 767px) {
    .x-navbar-inner {
        text-align: center;
    }

    .x-brand {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .x-brand img {
        max-width: 320px;
    }
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps.

[rotation]

it did center the logo on mobile but it did not move the social icons closer to the top. How can I move them up ? Thanks

[thai]

Hi @rotation,

Please update the previous CSS to this:

@media (max-width: 767px) {
    .x-navbar-inner {
        text-align: center;
    }

    .x-brand {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .x-brand img {
        max-width: 320px;
    }
    .x-navbar-inner .x-container.max.width {
        margin: 0;
    }
    .x-topbar .x-social-global {
        margin-bottom: 0;
    }
}

Hope it helps

[rotation]

thanks I got it

[lely]

You’re always welcome!

Cheers.