Menu styling for last menu item in WordPress

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 🙂

Post Views: 1

3 comments

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

Use the last-child pseudoclass in the CSS:

.mainnav li:last-child
  {
    /* your code */
  }

The function mentioned by Howdee_McGee was great, but only seemed to work for menus without sub menu items. For a menu with sub menu items, try:

function add_first_and_last_top_level($items) {
$topitems = [];
foreach($items as $menu_item){
    if($menu_item->menu_item_parent==0){
        $topitems[] = $menu_item->menu_order;
    }        
}
$itemcount = end($topitems);
$items[1]->classes[] = 'menu-item-first';
$items[$itemcount]->classes[] = 'menu-item-last';
return $items;
}

add_filter('wp_nav_menu_objects', 'add_first_and_last_top_level');

Menu styling for last menu item

Leave a Reply Cancel reply

3 comments

Social Network

Related posts

Leave a Reply Cancel reply

3 comments

Social Network