Menu: styling an active link/page
-
Hi,
I have a question about the active link/page in my menu.
I use this code for hoovering:
.nav-head ul li a:hover {text-decoration:none; color: #fff; background:#f29400;}Works fine.
But I want to use that for the active link/page too, so I guess this should work:
.nav-head ul li a:active {text-decoration:none; color: #fff; background:#f29400;}But it doesn’t. Any ideas?
Guido
-
Can you give us the site url please.
What do you mean by “active”?
Hi,
I mean the page I visit.. want to ‘mark’ that in menu when I am on that page.
Temp link: http://www.webmastergroningen.nl/wp2/
Guido
bravokeyl will probably tell you how to do that, but you should familiarise yourself with the active selector
http://www.w3schools.com/cssref/sel_active.asp
http://css-tricks.com/almanac/selectors/a/active/Thanks. Yeah, I understand now: active is clicking only. Stupid me :-(.
So I would like to know how to solve my issue..Guido
Which browser are you using btw?
what theme are you using?
what code does the theme use for the menu?
if it is a more recent theme, it might be using http://codex.wordpress.org/Function_Reference/wp_nav_menu
review http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes
or use a browser inspection tool to investigate the menu CSS classes of an active menu item.
As @alcymyth said use
.current-menu-itemselector to target active item..menu .current_page_item > a, .menu .current_page_ancestor > a, .menu .current-menu-item > a, .menu .current-menu-ancestor > a{ //Your styles }Hi,
I’m using my own theme: http://wordpress.org/themes/shipyard
Yes, it uses wp_nav_menu function.
I will try your solutions, thanks.
Guido
Adding code
.menu .current_page_item > a, .menu .current_page_parent > adid the trick.Thank you all!
Guido
The topic ‘Menu: styling an active link/page’ is closed to new replies.