[Resolved] Styling Logo in Sidebar in Mobile View

Home Forums Support [Resolved] Styling Logo in Sidebar in Mobile View

Home Forums Support Styling Logo in Sidebar in Mobile View

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1543867
    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 🙂

    #1544013
    David
    Staff
    Customer Support

    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.

    #1544649
    Elzanne Botha

    Thank you so much! It works perfectly!

    #1544732
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.