0

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?

4

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:

enter image description here

3
  • Nice drawing style! +1 – kaiser Sep 19 '12 at 20:35
  • Is there a way to access those "CSS Classes" in the code? How would I do it? – Shane Km Jul 15 '14 at 10:38
  • @ShaneKm Ask a new question.. – fuxia Jul 15 '14 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.