How to Highlight Current Page in Wordpress Menu? Please Help!

Envato Authors Theme Authors
1

Hi, i would like to highlight current page in Wordpress 3.0 Menu, and i am using jQuery Multi Level CSS Menu from dynamicdrive.

Here is the CSS: http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css

and this is how i have called the menu in header.php i am using wordpress 3.0 custom menu.


                     

                       <?php wp_nav_menu( array( 'menu_id' => 'nav', 'menu_class' => 'jqueryslidemenu', 'theme_location' => 'primary' ) ); ?>

The above menu code works perfectly, but please tell me how can i apply the highlighted current page in my menu.

I would really appreciate your guide!

Many thanks.

2

Hi, try the following CSS:

#myslidemenu .nav > li.current-menu-item > a,
#myslidemenu .nav > li.current-menu-ancestor > a { color: #f00; }

Happy new year :slight_smile:

3

Or if you want to use a custom actuve class.

Looking through my blog…found it, here it is:

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

function additional_active_item_classes($classes = array(), $menu_item = false){

	if(in_array('current-menu-item', $menu_item->classes)){
		$classes[] = 'active';
	}

	return $classes;
}
4
wpCanyonThemes said

Or if you want to use a custom actuve class.

Looking through my blog…found it, here it is:

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

function additional_active_item_classes($classes = array(), $menu_item = false){

	if(in_array('current-menu-item', $menu_item->classes)){
		$classes[] = 'active';
	}

	return $classes;
}

Nice, didn’t know about this, thanks for sharing :slight_smile:

5
unisphere said
wpCanyonThemes said

Or if you want to use a custom actuve class.

Looking through my blog…found it, here it is:

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

function additional_active_item_classes($classes = array(), $menu_item = false){

	if(in_array('current-menu-item', $menu_item->classes)){
		$classes[] = 'active';
	}

	return $classes;
}

Nice, didn’t know about this, thanks for sharing :slight_smile:

You’re welcome :slight_smile: I try to write and publish snippets that developers don’t already know about. :slight_smile:

6
unisphere said

Hi, try the following CSS:

#myslidemenu .nav > li.current-menu-item > a,
#myslidemenu .nav > li.current-menu-ancestor > a { color: #f00; }

Happy new year :slight_smile:

Thanks,

it’s working for other pages… but the home link is not highlighted by default, i want the home link to be highlighted by default when i visit my theme the first time. also the background color is changing but, the link color a { color: #f00; } is not changing, on current it showing the default css menu link color.

Do i have to add some extra menu code in my header.php

This is my menu code in header.php


                     

                       <?php wp_nav_menu( array( 'menu_id' ?> 'nav', 'menu_class' => 'jqueryslidemenu', 'theme_location' => 'primary' ) ); ?>

Thanks!

7

I think Unisphere is correct but there might be a hierarchy issue with the CSS. Try something like this:

#myslidemenu li.current-menu-item a { color:#B2C629; }
#myslidemenu li.current_page_item  a { color:#B2C629; }
8
JamiGibbs said

I think Unisphere is correct but there might be a hierarchy issue with the CSS. Try something like this:

#myslidemenu li.current-menu-item a { color:#B2C629; }
#myslidemenu li.current_page_item  a { color:#B2C629; }

I only added the CSS child selectors so that only the top level menus would get highlighted and not the children ULs, in other words, it was intentional :wink:

9
JamiGibbs said

I think Unisphere is correct but there might be a hierarchy issue with the CSS. Try something like this:

#myslidemenu li.current-menu-item a { color:#B2C629; }
#myslidemenu li.current_page_item  a { color:#B2C629; }

I solved that, it’s working with !important like this

.jqueryslidemenu > li.current-menu-item > a,
.jqueryslidemenu > li.current-menu-ancestor > a { color: #f00 !important; }

But now i want the menu home link to be highlighted by default

This is the highlighted current page state: http://i52.tinypic.com/29mvqlg.gif

and i want the menu home link to be highlighted gray by default like current page.

which is not, its like this now: http://i56.tinypic.com/1549ksw.gif

Please help me with this.

Many thanks!

10
unisphere said
JamiGibbs said

I think Unisphere is correct but there might be a hierarchy issue with the CSS. Try something like this:

#myslidemenu li.current-menu-item a { color:#B2C629; }
#myslidemenu li.current_page_item  a { color:#B2C629; }

I only added the CSS child selectors so that only the top level menus would get highlighted and not the children ULs, in other words, it was intentional :wink:

Thanks, unisphere

I solved that, it’s working with !important like this

.jqueryslidemenu > li.current-menu-item > a,
.jqueryslidemenu > li.current-menu-ancestor > a { color: #f00 !important; }

But now i want the menu home link to be highlighted by default

This is the highlighted current page state: http://i52.tinypic.com/29mvqlg.gif

and i want the menu home link to be highlighted gray by default like current page.

which is not, its like this now: http://i56.tinypic.com/1549ksw.gif

Please help me with this.

Many thanks!