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?
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 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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP