Text symbols in the navigation menu

WP nav menus don’t allow you to paste in HTML directly.

Option 1

Instead, you could create a “Cart” menu item, and use CSS to move the text off the visible page (so screen readers still read it, but sighted visitors don’t see it) and add the icon with an :after. (You can add a custom CSS class to the menu item in wp-admin, and use that to identify which link gets the :after and the text moved.)

Option 2

Or, you could use a custom nav walker, which could check if the current menu item links to the cart, and if so, adds the HTML markup you were originally trying to add.

Option 3

You could use wp_get_nav_menu_items() (see the Code Reference) to get the items, then use your own custom function to add the HTML markup you were originally trying to add. This might be simpler than the custom walker.

Leave a Comment