[Resolved] Styling Logo in Sidebar in Mobile View

[Elzanne Botha]

Hi there!

I need some assistance in styling my page: https://experi.co.za/ourshop/

I have added my logo to the sidebar in Elements with a hook instead of having a header:

I would like to do the following with it:
1. Center it in mobile view ( .site-logo {text-align: center !important;} is NOT working)
2. Also move it completely to the top in mobile view, to serve as my site-logo at the top

I also want to center all other sidebar items in mobile view that remain at the bottom above the footer.

Please advise.

Thank you 🙂

[David]

Hi there,

theres no easy way to move just the Site Logo from the sidebar to the top of the page, without moving the other widgets with it.

Instead you would need to:

1. Add the logo to your Site Identity as well.
2. Add this CSS:

@media(max-width: 768px) {
    #left-sidebar .site-logo {
        display: none;
    }
    #left-sidebar .textwidget p {
        text-align: center !important;
    }
}
@media(min-width: 769px) {
    #masthead {
        display: none;
    }
}

On mobile this will remove the sidebar logo, display the site header instead and center align the textwidget.

[Elzanne Botha]

Thank you so much! It works perfectly!

[David]

Glad to be of help!

[Author]

Posts