Center logo in header on mobile

Hi Dave,

Try this CSS:

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

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

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.

Brilliant, thanks David :)

You're welcome