[Support request] center site logo on mobile view

[Cynthia]

I have mobile logo turned off. I’m just using the main site logo because I like the size, but it is on the left side of the mobile screen. How can I center it on mobile view while keeping it on the left on desktop view.

Also in the top bar, I have the social media icons set to float to the left, which they are on desktop view, but display in the center on mobile view. I would like the social icons to float to the left on mobile view.

Thank you

[Fernando]

Hi Cynthia,

Try adding this in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .site-header .inside-header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .top-bar .inside-top-bar {
        padding-right: 0px;
        padding-left: 0px;
    }
}

.top-bar .inside-top-bar {
    justify-content: flex-start;
}

.top-bar .inside-top-bar aside#sow-social-media-buttons-5 {
    order: -1;
}

.inside-top-bar {
}

[Cynthia]

Hi Fernando – that code did work for the mobile logo, and the social icons moved over slightly. How can I move the social icons over completely to the left on mobile?

[Fernando]

I updated the code above, can you try that?

[Author]

Posts