Centering sticky logo on mobile

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%;

    }
}

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

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

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

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).

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

Glad we could help :)