[Support request] How to center site logo and left align menu on mobile screen

[nvc]

Hello,
I want to center my logo on mobile screens and left align the hamburger menu.
I watched this very helpful video from Leo but he is doing it only on desktop. Should I write some more CSS or something else in order to do it on mobile screens?

[Ying]

Hi there,

Can you link us to your site?

You can use the private info field.

Let me know 🙂

[nvc]

Please check

[Ying]

Try adding this CSS:

@media(max-width:767px) {
.site-logo {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.inside-header.grid-container {
    justify-content: space-between;
    flex-wrap: nowrap;
}

nav#mobile-menu-control-wrapper {
    margin-left: 0;
}
}

And remove this CSS from your child theme’s style.css:

.dropdown-custom {
    position: absolute;
    right: 10px;
    top: 33px;
}

[nvc]

Thanks Ying,
I’ve did what you said but now the menu isn’t working properly and it’s not at the far left position.
How can I fix that.
Thank you very much
Regards

[Ying]

Hum…I think we’ll need to adjust the HTML structure for a better approach.

Can you go to customizer > layout > header and enable the Use navigation as header option?

Please remove my CSS first, once it’s done, let me know, I’ll re-write the CSS based on the new structure.

Sorry for the inconvenience.

[Author]

Posts