Archived topic

How to center site logo and left align menu on mobile screen

5 replies · Started by nvc on January 30, 2023

Viewing posts 1–6 of 6

January 30, 2023 at 8:35 am #2514351

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?

January 30, 2023 at 11:25 am #2514538

Hi there,

Can you link us to your site?

You can use the private info field.

Let me know :)

January 30, 2023 at 11:33 am #2514549

Please check

January 30, 2023 at 12:36 pm #2514625

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

January 31, 2023 at 6:30 am #2515453

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

January 31, 2023 at 11:20 am #2516013

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.

This archived topic is closed to new replies.

Start building better websites today.