How to style a specific nav menu item?

Question

I have a site, which now have a new registration form and I want to highlight it by blinking the menu item. you can see the site here.

I wan to blink "Registration for seminar" item. I am using Polyon theme.

How can I do that?

Answer 1

To address a specific menu item in your stylesheet you can either use its id attribute (here: li#menu-item-230) or add a CSS class. I like the second option, that is more flexible.

Sample code for your theme’s functions.php:

add_filter( 'nav_menu_css_class', 'wpse_65375_class_by_title', 10, 2 );

/**
 * Make the title a CSS class.
 *
 * @wp-hook nav_menu_css_class
 * @param   array $classes
 * @param   object $item
 * @return  array
 */
function wpse_65375_class_by_title( $classes, $item )
{
    $new_class = mb_strtolower( $item->title );
    $new_class = str_replace( ' ', '-', $new_class );
    $new_class = sanitize_html_class( $new_class );
    $classes[] = $new_class;
    return $classes;
}

A menu item with the title Registration for Seminar has now the CSS class registration-for-seminar. You can make it blinking, bold, whatever … in your stylesheet now:

.registration-for-seminar
{
    text-decoration: blink;
}

blink will not work in Webkit browsers. For JavaScript workarounds ask on Stack Overflow.

Another way to add CSS classes is the native field for menu items in wp-admin/nav-menus.php: