Archived topic
Menu Item Height Keeps Shrinking To 50px
3 replies · Started by Kassim on June 27, 2021
Hello! I've searched for a previous post about this issue and couldn't find a response (it's also possible this is a no-brainer and I'm the only one that got stuck here).
I'm building a site out and for some reason the menu item height keeps reverting back to 50px. I set the height to 90px in the Customizer and it renders fine in the preview. But then when I publish the change it reverts back to 50px. Here's a sample page that I'm building out of the Wordsmith theme where you can see the logo: https://hojoydev.wpengine.com/?p=86907
I currently using the navigation as my header.
Thank you!
Hi Kassim,
You likely have this setting on the menu height - https://share.getcloudapp.com/E0uAy6lY
I see that you've set the mobile breakpoint to 2000px.
Because of this, the mobile breakpoint menu height you've set applies on viewports 2000px and smaller, which effectively affects desktop as well.
The workaround for this if you wish to keep the mobile breakpoint to 2000px but change the menu item height is by using custom CSS.
Example:
@media (max-width: 2000px){
.navigation-branding img, .site-logo.mobile-header-logo {
height: 90px;
}
}
@media (max-width: 768px){
.navigation-branding img, .site-logo.mobile-header-logo {
height: 50px;
}
}Elvin - thank you for this reply!
I've set the menu height as you've shown in the video and it seems to be working.
The reason I set the breakpoint to 2000px is because I was using that as a workaround for the sandwich menu to be the standard menu format on desktop and mobile. Is there another method I should be using to have the primary navigation be the sandwich menu in desktop and mobile? Thank you!
The reason I set the breakpoint to 2000px is because I was using that as a workaround for the sandwich menu to be the standard menu format on desktop and mobile. Is there another method I should be using to have the primary navigation be the sandwich menu in desktop and mobile? Thank you!
That's the way to go if you want to do that. :)
