[Resolved] How to centre the logo and hamburger menu on mobile device

[Nicola]

Hi,

On mobile devices I am trying to work out how to centre my logo with the hamburger menu below it and also centered. I’ve spent some time searching and trying out various css found on the forums but nothing seems to work specifically for me, though I have now at least centred my logo using this css, I’m not sure this is correct for my situation:

@media (max-width: 768px) {
.site-logo {
flex-basis: 100%;
text-align: center;
}

nav#mobile-menu-control-wrapper {
order: 1;
}

nav#site-navigation {
order: 2;
}
}

And this does not centre the hamburger menu below the logo, as you can see it is still sitting on the right hand side of the screen.

Can you help please?

Thanks,
Nicola

[Ying]

Hi Nicola,

Try adding this CSS for the hamburger menu icon:

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

[Nicola]

Thank you, that worked great, however the menu is sitting very close to the logo – how would I add some space/padding between the two?
Thank you, Nicola

[Ying]

You can add one more line to the CSS for the margin-top:

nav#mobile-menu-control-wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

[Nicola]

Perfect, thank you.

[Nicola]

Resolvec

[Ying]

You are welcome 🙂

[Author]

Posts