An easy way to do “or something” is to put vertical bars | between items by using border-right: 1px solid #333; on the CSS for the LI tags that wrap the menu items. That will add the vertical bars. You can adjust padding left and right to get the correct spacing between the nav items and the bar
If you add this function to your child theme’s functions.php file it will add a “/” after every link in you menu except the last one.
function add_markup_pages($output) {
$output= str_replace('</a>', '/</a>', $output);
$output=substr_replace($output, "</a>", strripos($output, "/</a>"), strlen("/</a>"));
return $output;
}
add_filter('wp_nav_menu', 'add_markup_pages');
Hopefully this helps
stvwlf has suggested adding a border which is the quickest way to do this, and the border can have a color change, one problem is the last menu item will also have the border.
EDIT: Not a problem see next comment from stvwlf 🙂
#access a{
border-right: solid 1px #eee;
}
Mat Lipe
I think this will add a ‘/’ after the menu item text, rather than the menu item!
[Home/ About/ Blog/ Contact ]
A separator will give an even spacing:
[ Home / About / Blog / Contact ]
To do this you would create a Child Theme, then in style.css add:
.menu-sep {
color: #eee;
display: block;
line-height: 3.333em;
text-decoration: none;
}
.menu-sep:last-child {
display:none;
}
Copy header.php from the parent to the child theme, find the line:
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
Adding the argument:
'after' => '<li class="menu-sep">/</li>'
Add a couple of comments to track your changes!
<?php // Start Menu Edit ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'after' => '<li class="menu-sep">/</li>' ) ); ?>
<?php // End Menu Edit ?>
Note:
This will only work with the custom menus activated, you will not see the separator until you create and add a menu to the ‘Primary’ location and save!
HTH
David
to keep vertical line off the last item at the right:
#`access a{
border-right: solid 1px #eee;
}
#access a:last-child{
border-right: none;
}`
Thanks folks for replying…. 🙂
The things was I was using this:
'after' => '<li class="menu-sep">/</li>'
I actually wanted to put a middle dot not a slash or line.
But what I didn’t know was – you have to go and select that particular menu – the automatic items that appear don’t apply the “after” attribute.
Not clear from your answer if you know this:
On the Menu formatting page, click Screen Options in upper right corner. There is a box you can check for Class that will display a Class field on every menu option where you can add a custom class to that menu option. Then you can assign CSS to that class.
