Half space in responsive menu

[Trevor Johnson]

Hello All, Does anyone know if it possible get a half (or small) space in responsive menu ? Some item choices on the menu bar are two or three words and I need smaller spaces between the two or three words in the same menu item.
Thanks for any ideas.

[crispy68]

There is no way from within the menu properties to change the spacing of the text.

However, you could try applying some CSS to adjust the letter spacing of the text.

Add the following to the head tag to adjust all of the text:

Code: Select all

<style>
#wb_ResponsiveMenu1 ul li a{letter-spacing:-1px;}
</style>

If you changed the ID of the menu, then you will need to replace the text "ResponsiveMenu1" with the name of your ID. Adjust the letter spacing value to your liking. A negative value brings them closer while a positive value spreads them apart. Keep in mind this affects all text in the menu.

If you only wanted to target 1 menu item, you could do the following:

Code: Select all

<style>
#wb_ResponsiveMenu1 ul li:nth-child(2) a{letter-spacing:-1px;}
</style>

The # specified by the nth-child should correspond to your menu item position. In the example above, this would be 2nd position.

This is the only way I know of adjusting the space between characters.

[Trevor Johnson]

Thank you Crispy68, I will try that tomorrow and let you know how I get on.

[Trevor Johnson]

Hi Crispy68, I tried what you suggested with success so thank you. I only needed the space between two words which were one item on the menu, so if anyone else needs it, I had to use the -2px in the code and then put a space between all the letters except of course for the space, in the responsive menu property window.
Thanks again.