Archived topic

center site logo on mobile view

3 replies · Started by Cynthia on October 3, 2022

Viewing posts 1–4 of 4

October 3, 2022 at 4:48 pm #2362065

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

October 3, 2022 at 6:46 pm #2362120

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 {
}

October 6, 2022 at 5:50 pm #2365737

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?

October 6, 2022 at 8:38 pm #2365800

I updated the code above, can you try that?

This archived topic is closed to new replies.

Start building better websites today.