wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Styling Active navigation button in navigation bar

Tutorials

Styling Active navigation button in navigation bar

Last updated on February 18, 2017
Posted on March 21, 2010

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Latest update: If you are using Tweny Ten wordpress 3 for the active category menu:

.current-category-ancestor {background:red;}

Active button current highlight Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Add About Me or About Author in sidebar
→ How to change permalinks wordpress

Comments

  1. CoreBloggers says

    March 21, 2010 at 1:39 pm

    very useful post 🙂

    • Kimi says

      March 21, 2010 at 5:17 pm

      Hey, thanks for coming by and commenting, well it’s for dummies like me lol 😉

  2. Chris Hoff says

    March 22, 2010 at 4:16 am

    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.

    • Kimi says

      March 22, 2010 at 7:54 am

      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 🙂

  3. TechChunks says

    March 22, 2010 at 12:33 pm

    Greats tips Mrs Moody 🙂

    • Kimi says

      March 22, 2010 at 1:09 pm

      Thanks for commenting TechChunks, It’s obvious for a newbie like me LOL .

  4. Cah Ndeso says

    March 23, 2010 at 11:37 am

    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

    • Kimi says

      March 23, 2010 at 2:07 pm

      Hey Adi, Thanks for coming by and commenting, i am so glad that it can be informative for others 😉

  5. Andrea Kalli says

    August 5, 2010 at 9:41 pm

    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.

    • Kimi says

      August 6, 2010 at 8:30 am

      @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-cat but if it doesn’t specifying with cat-item-35 can 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.

  6. Andrea Kalli says

    August 7, 2010 at 6:50 pm

    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.

    • Kimi says

      August 7, 2010 at 6:56 pm

      @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

  7. Andrea Kalli says

    August 7, 2010 at 7:13 pm

    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

    • Kimi says

      August 8, 2010 at 7:07 am

      @Andrea Kalli, you’re welcome, glad it could help!

  8. putriastiti says

    August 17, 2010 at 8:15 am

    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

    • Kimi says

      August 18, 2010 at 5:45 am

      @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 🙂

  9. Mike says

    October 8, 2011 at 4:47 am

    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.

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept