CSS for menu item added via functions.php

Question

I have added a current date item successfully to my menu via functions.php (Wordpress 4.7) using:

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'header-menu')  {

        $todaysdate = date('l jS F Y');
        $items .=  '<li class="menu-item">' . $todaysdate .  '</li>';

    }
    return $items;
}

My problem is, that the styling is different to those item added in the wp-admin backend. I have tried a few things according to WP Menu Item CSS Classes, but still got problems with the classes. Help would be great. Thank you very much!

Answer 1

Normally, menu items are rendered as an <li> tag with an <a> tag inside. You could simply wrap $todaysdate in an anchor so that this item will be styled like the others:

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'header-menu')  {

        $todaysdate = date('l jS F Y');
        $items .=  '<li class="menu-item menu-item-date"><a>' . $todaysdate .  '</a></li>';

    }
    return $items;
}

To keep the item from showing a hand cursor when hovering, add this CSS:

.menu-item-date a:hover {
    cursor: default;
    /* Other styles for hovered date item */
}

Alternatively, you could leave out the <a> tag wrapper and create styles for .menu-item-date to make this item look like the others, but that might be more work.