Enormous line heights in the menus – can't add line breaks

Hello,

I’m working on a website with the Enfold theme. The client would like to add small custom 24×24 icons above each tab in the main desktop menu only (not the mobile menu).

However, when I try to add these icons via HTML in the WordPress menu editor and add a line break between the image and the text, the line height between the image and the text is HUGE, so much so that the text then appears BELOW the menu bar on the site.

E.g., this happens when the code in the menu editor looks like this:

<img src="LINK TO IMAGE"><br/>Menu Text

The <br/> tag results in a space of at least 150px between the image and the text. This does not happen anywhere else on the site.

But I have ALSO tried to do this via a couple of plugins, notably the Menu Image plugin. The plugin works exactly like manually adding the HTML source code in the WP menu editor: inserts the image above the text, with the same huge gap between the icon and the menu text.

The advanced styling in the theme options gives main menu links options for letter spacing, but not line height.

Please advise what I need to add to modify the huge line break setting in the menu bar. Thank you!

• This topic was modified 3 years, 7 months ago by larosadigital.