[Resolved] Centering sticky logo on mobile

Home Forums Support [Resolved] Centering sticky logo on mobile

Home Forums Support Centering sticky logo on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #597605
    Pearson

    Hi,

    I have been spinning my wheels on this. When collapsed down the header logo does not center correctly, any idea why?

    Thanks in advance!

    #597628
    David
    Staff
    Customer Support

    Hi there,

    you have CSS for absolute for positioning the logo. The left: 43% field is knocking it out of alignment on mobile. Try this instead of that:

    .main-navigation .site-logo.navigation-logo {
        position: absolute;
        top: 5%;
    }
    @media (min-width: 768px) {
        .main-navigation .site-logo.navigation-logo {
            left: 43%;
    
        }
    }
    #597629
    Pearson

    Hey David,

    Thanks for replying so quick. I replaced what I had with your code, not sure if it did the trick, still looks a bit off, hrmm. How does it look for you?

    Thanks,
    Pearson

    #597630
    David
    Staff
    Customer Support

    Hi Pearson, do you have any caches in place? I can still see the old code in play.

    #597633
    Pearson

    Hi David,

    Not that I know of. I updated the link in the original post to show the stylesheet. Your code I added at the bottom.

    Thanks,
    Pearson

    #597839
    Tom
    Lead Developer
    Lead Developer

    This CSS still exists inside the Simple CSS plugin:

    .main-navigation .site-logo.navigation-logo {
        position: absolute;
        left: 43%;
        top: 5%;
    }

    Best to remove it completely, then add the code David gave you in your child theme (or Simple CSS).

    #598345
    Pearson

    Thanks David and Tom! Apologies for having lame CSS kicking around where it shouldn’t.

    #598349
    Tom
    Lead Developer
    Lead Developer

    Glad we could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.