[Resolved] CSS 'line-height' in menu items

[David]

Hi guys,

I’m wondering why you’re using line-height for menu items height (links) instead of paddings. There’s nothing wrong about it, but sometimes can cause problems when text wraps in certain situations. One more question: ¿are you planning to move layout to a more modern system like flexbox or CSS Grid?

That’s it. Thank you for building such a good theme.

Greetings from Spain,
Víctor.

[David]

Hi Victor,

good question 🙂 Line height is the common method for Theme nav heights. It’s simpler to have just line height then it as to have line height and top & bottom padding. Once CSS rule, one customiser option. Also from customising perspective, its easier to add padding when none exists, then having to remove or overwrite CSS padding rules if you want to change them.

Flex / CSS Grid are planned for the future. Current Flex is used in the Mobile Header as it is 100% supported by all mobile browsers. To maintain backwards compatibility and legacy browser support it will probably be drip fed in this way.

[David]

It makes sense now. With padding you have to make some calculations, substract item’s height, plus divide the result by two. With line height you need no calculations. Good to know these techniques

Thank you for your help.

[David]

You’re welcome 🙂

[Author]

Posts