Menu styling for last menu item

by

okay so I’m using the following code to get my links…

<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => '', 'menu_class' => 'mainnav') ); ?>

This is my CSS for the nav…

.mainnav a {
    font-family: gooddog_plainregular, Arial, sans-serif;
    font-size: 30px;
    color: #ffea00;
    text-decoration:none;
}

.mainnav li:after {
content: url('images/nav-divider.png');
}

.mainnav li.last:after {
content: none;
}

.mainnav li {
    list-style: none;
    display: inline;
    font-size: 30px;
    margin-bottom: 10px;
}

.mainnav li.last {
    list-style: none;
    display: inline;
    font-size: 30px;
    margin-bottom: 10px;
}

The problem I’m having is that the li.last doesn’t work, how do I add the class to it?

Thanks 🙂

3 Answers
3

Here’s a function I use to add a first / last class to wp_nav_menu() items:

function add_first_and_last($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_first_and_last');

Developer Resources – wp_nav_menu_objects Hook

Leave a Comment