[Resolved] Center logo in header on mobile

[David]

Hello

How do I go about centering this logo when viewing on mobile?

https://thepropertyfund-com.stackstaging.com/

Tried a few things from the forum, but none have worked.

Thanks
Dave

[Leo]

Hi Dave,

Try this CSS:

@media (max-width: 768px) {
    .inside-header .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

[David]

Thanks Leo, that centered the logo on mobile, but when you open the menu the logo disappears. Any ideas why?

[David]

Hi there,

try:

@media (max-width: 768px) {
    .inside-header .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
    }
}

The top value is the addition that is required, to ensure it remains in place, you may need to tweak the 20px value.

[David]

Brilliant, thanks David 🙂

[David]

You’re welcome

[Author]

Posts