I've identified two methods of separating pages in nav menu on my blog (http://reasonandfolly.com) but cannot figure out what php or css file needs to be modified to achieve the result and will admit to not knowing the difference between "span class" and "span divider." Until I get a better handle on basic WP coding, I'd truly appreciate some help. Either of the below examples would fulfill my needs. The question is, how do I implement?

  1. http://www.themezilla.com < span class = " divider " > / < /span >

  2. http://chimpchomp.us < span id = " divider " > // < /span >

This is the code currently in my header.php file:

   </div><!-- /logo -->
                    <?php wp_nav_menu( array( 'menu' =>  __('Main Menu', 'meanthemes'), 'theme_location' => 'primary', 'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
                </nav><!-- /nav -->
        </header><!-- /header -->

This is one of the code i have used in the past. The below code goes in your functions.php

class MP_Footer_Menu extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        STATIC $counter = 0;
        if ($counter++)
            $output .= '<li class="divider">/</li>';
        parent::start_el($output, $item, $depth, $args, $id);


This is an extra parameter passed in the array passed to wp_nav_menu. It should be present inside your php template file (probably header.php or footer.php)
'walker' => new MP_Footer_Menu()

If you can't figure out the exact place to put this line, you can do a folder-wide search for wp_nav_menu in your theme & then update your question copy-pasting some nearby code & then someone here will tell you the exact place.

This should get the divider in place but you'll most probably also need some CSS. I suggest that once you're done with the above & if you have some problem in CSS, go over to https://stackoverflow.com/ & ask that question separately. You'll get better answers there for CSS.

| improve this answer | |
  • I see. I've located the wap_nav_menu in my header.php file </div><!-- /logo --> <nav> <?php wp_nav_menu( array( 'menu' => __('Main Menu', 'meanthemes'), 'theme_location' => 'primary', 'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?> </nav><!-- /nav --> </div> </header><!-- /header --> – RKB Dec 9 '12 at 19:31
  • 'menu_id' => false, 'menu_class' => false ) becomes 'menu_id' => false, 'menu_class' => false, 'walker' => new MP_Footer_Menu() ) – Mridul Aggarwal Dec 9 '12 at 21:23
  • Did this work for you? Could you accept the answer if so? Thanks. – Andy Macaulay-Brook Aug 6 '16 at 16:25

Assuming you had a structure for your menu like this (crudely typed):

<ul id="my_menu">

You could use CSS like this:

#my_menu a:after {
    content: '//';
#my_menu a:last-child:after {
    content: ''; /* Hide for last menu item */

It should be mentioned that the last-child selector doesn't work in IE8 if you have to support that browser. Another way to do this would be to use :before and :first-child, which has support in IE8:

#my_menu a:before {
    content: '//';
#my_menu a:first-child:before {
    content: ''; /* Hide for first menu item */
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.