- This topic has 6 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
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,
NicolaCustomer Support
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, NicolaYou 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 🙂
- You must be logged in to reply to this topic.
