Archived topic
How to centre the logo and hamburger menu on mobile device
6 replies · Started by Nicola on February 17, 2023
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
Hi Nicola,
Try adding this CSS for the hamburger menu icon:
nav#mobile-menu-control-wrapper {
margin-left: auto;
margin-right: auto;
}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
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;
}Perfect, thank you.
Resolvec
You are welcome :)