Using dividers in menu navigation – where to add code?

3 Views

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 >

    Read More

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

This is the code currently 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 -->
Post Views: 3

Related posts

Leave a Reply

2 comments

  1. 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.

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

    <ul id="my_menu">
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contact</a></li>
</ul>

    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 */
}