Archived topic
Center logo and hamburger menu on mobile
5 replies · Started by Yael on March 17, 2022
Hello,
I viewed the posts on centered logo / menu on mobile but have not yet found a solution.
I'm using the CSS for split menu on mobile and want logo and hamburger menu centered on mobile.
Right now the hamburger menu is left aligned; how do I center that below the logo
https://staging.clarityhealing.foundation/
[credentials moved by admin for security purposes]
Hi Yael,
You can try adding this CSS:
nav#mobile-header .site-logo.mobile-header-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
nav#mobile-header button.menu-toggle {
margin-left: auto;
}Here's how to add CSS - https://docs.generatepress.com/article/adding-css/
Thanks, Elvin. This moved the hamburger menu to the right; is it possible to have the hamburger icon below the logo and centered as well?
do you mean like this? https://share.getcloudapp.com/P8u1YKm2
If yes, this'll be the more appropriate CSS to use.
nav#mobile-header .inside-navigation {
display: flex;
flex-direction: column;
}Thank you!
No problem. Let us know if you need further help. :D
