split the navigation menu by the “ | ” in wordpress

Question

Is there a simple way to split my navigation menu by the ' | ' for example ?
This is my menu :

(home  about us  our work   connect us) 

So I need like this one :

(home   |   about us   |   our work   |   connect us)

and when the editor add a new item in ( Appearance->Menus ) it must add the ' | ' automatically . Any idea ? php html css javascript ... no problem

Answer 1

You can do something like this to add line and check the

Fiddle

Here is simple code

<div class="verticalLine">

home  

</div>

CSS

.verticalLine {
    border-left: 2px solid ;
    display:inline;
    padding-left:5px ;
}

Hope this is what you are looking for.Just a newbie trying to help:)

Answer 2

try this

<?php wp_nav_menu(array('after' => '|')); ?>

For style

   .main-nav li 
    {
    list-style-type: none;
    display:inline;
    border-left:1px solid #000000;
    }

  .main-nav li:first-child
   {
        border-left: 0;

   }

Answer 3

I did this to my site using jquery.

 $('ul#mainNav > li').not('ul#mainNav > li:last').append(" | ");

You would need to update the selector to match your own navigation.