How to get Menu Navigation Labels to output HTML

The “Navigation” field is not where you want to place your CSS class. The navigation is what the user will see in the menu, so don’t put any code there.

To enter a custom CSS class to your item, you need to do the following:

  • Click the “Screen Options” tab in the top right corner of the page.
  • Under “Show advanced menu properties”, tick the “CSS Classes” checkbox.
  • Now for every menu item, you have a field labelled “CSS Classes (optional)” where you can enter “icon-fixed-width icon-home”.

Job done! 🙂

Related Posts:

  1. Where to place a svg chevron down in my custom walker?
  2. Programmatically add a Navigation menu and menu items
  3. Dynamically exclude menu items from wp_nav_menu
  4. Show current navigation path from menu
  5. Call custom field into menu item
  6. Exclude Private, Draft pages from Primary Nav when using custom menu
  7. wp_nav_menu always falls back to a menu
  8. wp_get_nav_menu_items how to exclude sub level menu items?
  9. Add custom attributes to menu items without plugin
  10. Add Page ID class to nav menu items
  11. Not able to get current menu ID
  12. Add class to active top level (grandparent) menu item
  13. Add custom SVG icons to Social Icon MENU in WordPress Twenty Seventeen Child Theme
  14. custom menu not found
  15. wp_nav_menu doesn’t generate parent/ancestor classes
  16. How to add text before WordPress menu item href
  17. Why is ‘nav_menu_item_args’ filter’s $item argument empty?
  18. WordPress wp_nav_menu with a nav tag
  19. Hide and show menu subpages
  20. `start_el` depth argument in custom nav walker always evaluates to zero
  21. Benefits of using Nav Walker?
  22. Use walker for specific menu, or avoid use of walker
  23. Change where navigation bar links?
  24. Programmatically set current-menu-item using wp_nav_menu
  25. has_children in custom nav_walker
  26. How to have custom menu Item CSS Classes for wp_page_menu() or wp_list_pages()
  27. Adding Custom “Current Menu Item” class to navigation?
  28. How to fix “Supplied nav_menu_item value missing property” after update to WordPress 5.0
  29. Check if menu id = $specific_id – then insert specific
  30. wp_nav_menu including Skype URL
  31. Change an li class name in a wordpress custom menu walker
  32. Separator for custom nav menu
  33. How do I add recent posts to the menu?
  34. Conditional secondary menus
  35. current-menu-item class is not added
  36. Automatically list top level menu item child pages
  37. Nav and logo loading each time causing menu to move JointsWP – Foundation 6
  38. Check if menu_item has children or has parent
  39. wp_page_menu not working right?
  40. Using _s theme, menu changes do not affect header menu
  41. How to get rid of the home link in nav menu?
  42. Add span in top menu item with nested itens
  43. Is it possible to add a dynamic link in the main navigation in a child theme
  44. display menu as table layout
  45. Show children (sub-navigation) of active menu item only
  46. Menu Arrow for Child Element
  47. Adding an external link to wordpress menu
  48. How to make wordpress nav menu use post custom meta data
  49. Add a counter beside menu item label
  50. add another html tag after li element in wp_nav_menu
  51. The cart, checkout, and shop links not getting removed
  52. Twenty Fifteen: Change navigation menu behavior
  53. Display Menu Navigation Label
  54. Menu is not displaying on the site navigation [closed]
  55. Odd spacing in Navigation Bar [closed]
  56. how to add home icon instead of text in wordpress menu
  57. wp_list_pages Hierarchical Help
  58. How to avoid the and which added when custon menu widget is used
  59. Add pages content to startpage through custom menu
  60. How to add a menu that belongs to parent blog to all child-blogs?
  61. Updated WordPress, now Navigation is Messed Up
  62. How to change how WordPress renders navigation menu on Block Themes
  63. Problem with links once in portfolio item
  64. url_to_postid method in walker_nav navigation menu causing exceptionally high TTFB
  65. Add Different Class on Different Ul in twenty-twentyone theme
  66. Get Each Menu Nav Label of Menus in HTML tag
  67. Is it all right to put the whole tag into template_part file?
  68. wp_nav_menu container style args
  69. Misleading behaviour on Menu & Theme location
  70. How can I click the parent menu then redirect to a special URL?
  71. How do I display menu in header without loosing styles?
  72. Adding additional html to the end of the root level in a custom nav walker
  73. Navbar is hidden behind carousel when using wp-boostrap-navwalker
  74. Navigation bar is on live site but nothing under menu so can’t add in a page
  75. Building a menu from a large number of pages?
  76. Show thumbnail to category items in wp_nav_menu(), how?
  77. Add data-track to links in menu
  78. How to select particular menu position in wordpress?
  79. Links in new menu don’t work
  80. Conditional Nav Menu Inside Nav Menu Across Multisite Sites
  81. Is it possible to seperate wordpress menu by different div?
  82. How to add odd and even classes to all nav links through walker?
  83. Output sort number in wp menu list item?
  84. Check in walker if current page is descendant
  85. Active page link not getting class assigned
  86. Add dynamic content block to nav section generated by custom walker
  87. Next/previous a-like single navigation
  88. Customize Walker_nav_menu to show posts if item is category
  89. How to output the menue structured for tabbed navigation?
  90. Replace Menu Item with Logged in username
  91. Walker for menus
  92. WordPress Navigation
  93. Navigation list not correctly styled on pages with custom template (missing .current-menu-item)
  94. How was this menu system created?
  95. Display sub menus as separate lists
  96. how can i get the page_ID in nav li [closed]
  97. How do i add logo in wordpress studiopress (glam theme)?
  98. Two Homes In Navigation Menu
  99. Add featured posts to nav menu
  100. WordPress “add to menu” button not working

Leave a Comment