How to add menu Separators in wordpress menu items

There are couple of ways to add menu separators in wordpress menu items but here I am going to demonstrate, how do we do this with wordpress functions.

Let 's  start!



Step 1.  You can find this tiny snippet of code in your default theme.

 <?php wp_nav_menu('menu=your-menu'); ?>

Step 2.  add &after=<li class="menu-divider">|</li> after the name of your menu like this:

<?php wp_nav_menu('menu=your-menu&after=<li class="menu-divider">|</li>'); ?>

Step 3.  You want to hide the separator for the last menu item. place this snippet into your style.css file.

li.menu-divider:last-child {display:none;}

Step 4.  Cheers. Note! You may be want to add the separator before the menu item, so you just want to replace "before" with "after", then you also want to use first-child instead of last-child in your css code in order to hide the first menu item 's divider.