Archived topic
Centering hamburger menu (vertically) on mobile
7 replies · Started by pcdoctoratl on February 10, 2022
Hello, I appreciate the help with the previous issue i had.
I would like to vertically center the hamburger menu on the mobile header.
Secondly (not sure if i need to start a different topic or not, but) i would like to make the header button to not be as tall, the text size is fine, i just don't want the brown button to extend so close to the edges and would prefer it remain centered. Thank you!
Hi there,
1. try this CSS:
#mobile-header .menu-toggle {
display: flex;
align-content: center;
}2. this CSS:
#mobile-header .mobile-bar-items .button {
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
}add a line-height property like so:
#mobile-header .mobile-bar-items .button {
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
line-height: 36px;
}That worked great, thank you! How do i make the logo 36px to match the hamburger & button height-wise?
Go to Customizer > Layout > Primary Navigation, switch to mobile view and reduce the Menu Item Height by 4px.
Thank you! that worked. Now everything is lined up vertically. It does look like the spacing between the logo, button and hamburger menu isn't equal also the hamburger menu i not centered vertically? This is for the mobile header.
Try this to tweak the position of the hamburger
.gp-icon.icon-menu-bars {
position: relative;
top: -4px;
}that will move it UP by 4px.
That worked great, thank you very much!
Glad to hear that!
