TransWikia.com

Inserting additional   into menu item text

WordPress Development Asked by MarsAndBack on January 16, 2021

I’d like a specific menu item to have more spaces between words.

For example:
Word Word

Needs to be:
Word      Word

In the menu editor, WP strips-out any additional spaces added with the spacebar or using the HTML code  .

What’s the next most efficient method?

2 Answers

Previously I assumed WP would strip HTML, so I never tried it.

The HTML below works like a charm, using the WP menu editor:

Word <span style="margin-left: 20px;"> </span> Word

(however, inputting &nbsp; didn't)

Alternatively, the CSS trick mentioned by Jacob and Linda would work well too:

word-spacing: 3px;

My menu item actually has 4 words, and I just needed to increase the middle spacing.

In the end, it's nice avoiding a PHP function or JS client-side. I just wonder is there any issue down the line having HTML in my menu title. Other than my menu rendering in the page layout, I can't think of where else I may output the menu items to.

Correct answer by MarsAndBack on January 16, 2021

One of the options in the wp_nav_menu function is whether to preserve whitespace. The default is that it’s preserved, but perhaps your theme has it set to discard?

https://developer.wordpress.org/reference/functions/wp_nav_menu/ 'item_spacing' (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.

You could also add a CSS class to just that one menu item and use the word-spacing property to give the appearance of more spaces: https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Answered by Linda Paiste on January 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP