Putting a Separator Between the Navigation Links?

Can you post a sample of the HTML after your manual change so we can see exactly where you want the separator?

Not sure what you mean by “manual change” I’m not doing any manual change it’s all automatic by a function call, I registered the navigation in the functions file like this:

// REGISTER NAV
function register_my_menus() {

	register_nav_menu(
	'primary-menu', 'Primary Menu'
	);

}

add_action ('init', 'register_my_menus');

With this above code I’m able to go into Appearance -> Menus and add as many menus or pages as I like, this is the function call to the navigation bar:

<h3 id='blog_navi'><?php wp_nav_menu(array( 'theme_location' => 'primary-menu')); ?></h3>

And there’s really not more to it, I simply go to Appearance -> Menus and add the navigation items there.

Though, I’d like to have this separator ‘/’ in a different color than the font between the items. Just like I showcased it in my first post.

OK, I assumed that you were already putting in a separator manually. If so, I need to see the HTML generated for that. A link to your site where the menu is displayed will do.

I can add things to the menu code generated by wp_nav_menu, but I need to know exactly how you would like the additions to be inserted. Should the separators be in a list item by themselves, between the list items created by wp_nav_menu? Or some other arrangement?

Thanks for the help, to answer your question, it would be good to have them in their own li tags so I can apply CSS to them.

It would be optimal if the last navigation item would not have a slash behind it, but if it’s to complicated to accomplish then simply putting a slash behind every item will do the job.

Here is some code that might do what you want:

// Add a separator between menu items.
$sep = '<li class="menu_separator">/</li>';
$menu = wp_nav_menu(array('echo' => 0));
$parts = preg_split('#</li>.+?<li#s',$menu);
$newmenu = implode("</li>\n$sep\n<li",$parts);

It didn’t work for me but I solved it differently, I simply did a
nav div li { boder-right: 1px solid skyblue; }

Now instead of a / it’s showing a straight line like | , which works great too.

Thanks for your help tho.

Just as a notice you can solve it this way too, in case someone is interested in it:

wp_nav_menu(array( 'link_after' => '<li><font color="seagreen"> / </font></li>', 'theme_location' => 'primary-menu'));

Chaseman, nice one. Thanks a lot. I changed it a little bit to

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'link_after' => '<div class="delimiter">|</div>' ) ); ?>

Then to align it right, remove the last pipeline and to remove it from the subnav items i added css:

.delimiter {float: right;color: #ccc;padding-left: 10px;}
.sub-menu .delimiter {display: none;}
#menu-item-102 .delimiter {display: none;}

I don’t know if this is the best or easiest way but it worked for me…

Very great, thanks for letting me know about that, you have good CSS skills.

I’ve changed the way how I have my separator a while ago and I added an arrow image (like this >> ) in front of the menu items with link_before.