Archived topic
Customizer - Typography Line Height vs Menu Height (Off Canvas)
3 replies · Started by Robyn on January 13, 2022
Hi,
In the Customizer there are a couple settings that I am wondering about. Under Typography I've added Off Canvas Panel and set the Line-Height as 1.7 REM. I want menu items that are long (CATERING & RESERVATIONS) to still look like one menu option by wrapping with 1.7 REM spacing between the wrapped lines.
Under Layout > Off Canvas Panel, I've set Menu Item Height to 60 with the expectation that it would give 60px of space between each menu item.
However, they seem to be fighting each other and not doing what I expect.
The end result is I would like the off canvas to look like this, but the red box spacing removed, because that is one menu item.
I could likely do it in CSS? so maybe my question is just about what those two customizer settings are meant to do.
Thanks for any help!
Robyn
Hi Robyn,
The Menu Item Height in the customizer is using line height to control it, so it's the same thing to add that class to the typography system, they are overriding each other.
I would recommend set the menu item height option in customizer > layout > off canvas panel to a small value, eg. 20px, then use this CSS to control the gap between the menu items:
generate-slideout-menu .slideout-menu li > a {
padding-top: 20px;
padding-bottom: 20px;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Hi Ying, Thank you so much!
I got it to work using this css and they now look nice and spaced.
.slideout-navigation.main-navigation li > a {
padding-top: 20px;
padding-bottom: 20px;
}
Have a great night!
Robyn
Very good :)
You are welcome!
