You might want to highlight or change background color of your button for the active page into different color than other navigation buttons so that your visitors will notice which page they are viewing.
The code is
.current_page_item {background:red;}
or
If you use category list as your nav, the code will be:
.current-cat{background:red;}
You can paste this example code in your css file, of course play with the attribute to get the style that you want.
Latest update: If you are using Tweny Ten wordpress 3 for the active category menu:
.current-category-ancestor {background:red;}
very useful post 🙂
Hey, thanks for coming by and commenting, well it’s for dummies like me lol 😉
Nice tutorial Kimi. I’ve avoided CSS styled nav bars for a while and usually just stick to plain old links, but maybe now I can give something a little more fancy a shot. Thanks for posting this.
Hey Chris, Thanks for coming by, i am a beginner of css as well. In my case, I love firebug addon for firefox, it’s so useful to inspect our sites’s elements, here is a quick link It’s 100% free 🙂
Greats tips Mrs Moody 🙂
Thanks for commenting TechChunks, It’s obvious for a newbie like me LOL .
Your information is very interesting and informative with the visual support.
Some additional color in a blog, it is proven to help visitors to get a refresher vision.
Greetings introduction from Indonesia
Adi
Hey Adi, Thanks for coming by and commenting, i am so glad that it can be informative for others 😉
So, I’ve got the nav buttons to change the background color for the pages, but can’t seem to apply it to nav buttons that are categories using your example code above for each. Is it possible that I cannot use both of them in the same css file? CSS is not my thing, so I could be trying to do something it won’t do.
Thanks for your insight and easy tutorial.
@Andrea Kalli, Hey there, you can use both the code above in the same css file, it is even recommended to improve site loading page.
The category will be highlighted with
current-catbut if it doesn’t specifying withcat-item-35can work as well.35 will be definitely different in your theme. If this doesn’t work, email me your site or theme you are using either here in comment or contact page, it will be easier to check. (if you dont mind of course 🙂 )
Let me know if it helps.
Hmmm, I can’t locate either of those two in my style.css. I’m using the Twenty Ten theme on the site at http://www.milehicycleguy.com.
Thanks for offering to take a look at it for me.
@Andrea Kalli, hey,
adding this code:
.current-category-ancestor {background:gray;}might help.I will update my post for this, thanks! 🙂
Let me know if it doesn’t.
Greetings
OH MY! You rocked it! That worked like a charm. Your help is so very appreciated.
I was going to go without, but thank goodness you stepped in and was generous enough to help me.
Thanks so very much! You made my day.
Andrea
@Andrea Kalli, you’re welcome, glad it could help!
Hey Kimi, I have tried your methods about the round corner layout and that worked. This time I wanted to make my navbar a little bit coloured. But the codes never worked. I have tried the code hundreds of times 🙁 What’s probably wrong?
Thank you for your help.
this is my blog :
http://www.putriastiti.com
@putriastiti, Hi there
I have visited your site, your nav bar’s background is already purple?
Try to clean your browser’s cache, and refresh your blog.
Good luck 🙂
You simple little video (which was professional done :)) cleared up a three day, hair pulling search for the answer you gave.
The problem? This does not work, at least not in my theme:
.current_menu_item {background:red;}
I saw your video which used:
.current_page_item {background:red;}
This worked immediately. Thank you thank you. So, if you have a minute, what IS .current_MENU_item used for? Is for posts or categories as opposed to pages? It must work somewhere.