Codeinwp / neve

A fast, lightweight, AMP ready WordPress theme built with speed and usability in mind.
https://themeisle.com/themes/neve/
GNU General Public License v2.0
262 stars 84 forks source link

Primary menu items intersect each other on mobile when changing font settings #1883

Closed irinelenache closed 4 years ago

irinelenache commented 4 years ago

Description:

After adding two posts with longer names to the primary menu and making font size bigger, the menu items intersect on mobile. The items looked ok only after setting the Items Height to 100 px (maximum).

How to reproduce:

  1. Import the Web agency starter site.
  2. Add the "A simple guide to design thinking" and "5 ux principles for creating a great website" to the existing Primary menu.
  3. In Customizer > Header > Primary menu > Typography > Mobile raise the Font Size and Line Height.

Expected behaviour:

The items should have space between them (i think)

Current behaviour:

The menu items start to intersect.

Reference:

https://www.loom.com/share/2d0b932d6975458797085a5e036887bd

The menu after setting the Items Height to 100px: image

Technical info

rodica-andronache commented 4 years ago

@irinelenache I think it might be the same thing mentioned here https://github.com/Codeinwp/neve/pull/1848#issuecomment-671204954 Can you please check?

irinelenache commented 4 years ago

@rodica-andronache the line height has effect when the menu items are longer and go multi line. I think some vertical item spacing should be done automatically when the font size is raised, or at least an option to do it. https://user-images.githubusercontent.com/67897586/90112097-38eae480-dd58-11ea-987f-af0d2c33041c.png -> If the font size is a bit bigger, setting the Items Height to maximum still doesn't make it look ok.

abaicus commented 4 years ago

This should be handled in this PR