Support » Themes and Templates » current_page_item not changing link text colour

  • Hello All,

    I’ve been googling this for a few hours and keep drawing a blank no matter what I try – so I’m wondering if someone will be able to help me!

    I’m working on using WP as a CMS and want to style my navigation links to be white when the user is on that page.

    Here is what I’ve got so far:

    As you can see, I’ve got the navigation set up so that when you hover over the link it changes to white. What I can’t seem to get is the link text color changed to white when you are on the specific page. By using the .current_page_item class in my style.css I can get the background changed, or like I currently have – the correct link underlined. I just seem at a complete loss as to changing the text itself to white.

    Is it a simple line I am missing? Have I styled the nav list wrong? Here is the css that makes it does what it’s currently showing:

    #header_nav a, #header_nav a:visited {
      color: #4D4D4D;
      text-decoration: none;
      font-size: 9px;
      font-family:Tahoma, Geneva, sans-serif;
    #header_nav a:hover{
      color: #fff;

    Anyone got any clues?
    Thanks in advance,

Viewing 8 replies - 1 through 8 (of 8 total)
  • The .current_page_item is referring to the li list item. You need to target the actual < a > element. Try this:

    .current_page_item a:link, .current_page_item a:visited {color: #fff; text-decoration: underline; }

    Hi Simon,
    Thanks for your suggestion… still seems to have drawn a blank though – something must be overriding the font colour because the underline part of it works and is white just the text seems to be resisting the colour change!

    Ohhh I’ve fixed it…
    I think where I’d messed up was putting the color in the #header_nav a, #header_nav a:visited css section. I took the #4D4D4D out of there and made am a {} css item and specified links to be #4D4D4D. Which all works now.
    Thanks for anyone who took time to read this and wonder what the hell I was on about!

    Yeah, you have to be careful with specificity with CSS. Here’s a great chart that lays out how much Sith Power each selector within CSS has.

    An id element (like #header) will over-ride a class element (.current_page_item).

    I was having the same problem. I used the code of the second comment, with the following changes:

    #header_nav .current_page_item a:link, #header_nav .current_page_item a:visited {color: #fff; text-decoration: underline; }

    This resolved it for me. Had to specifically refer to the .current_page_item class within the specific id I wanted to change. Seemed to take care of it.

    I’m having some issues with the current state as well.

    My code for the nav in the header is as follows:

    <div id="nav">
    	  <ul class="menu">
        <li class="page_item"><a style="color:#f45ee4" href="<?php bloginfo('url'); ?>">HOME</a></li>
        <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
        <li style="float:left; margin-left:5px;"><a href="" target="_blank"><img src="<?php bloginfo('template_url');?>/img/PR_nav_facebook.gif"/></a></li>

    My code for the nav css is as follows:

    /* Begin Nav */
    	padding:9px 15px;
    	background:url('../../img/PR_nav_div.gif') no-repeat top right;
    .page_item> a:link, .page_item> a:visited{
    .page_item> a:hover{
    /* End Nav */

    I am unable to target .current_page_item.

    I’ve also tried targetig it as such:

    .page_item> a:hover, .current_page_item >a{

    Any thoughts or ideas??

    Fixed my issue.

    #nav .current_page_item a:link, #nav .current_page_item a:visited{

    Did the trick.

    FYI – Here is my complete code that includes a link to the home page:

    #nav .page_item a:link, #nav .page_item a:visited {
    	color: #a1988c;
    #nav .current_page_item a:link, #nav .current_page_item a:visited {
    	color: #54301b;
    <ul id="nav">
    	<li class="page_item <?php if (is_front_page()) { ?>current_page_item<?php }?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home') ?></a></li>
    	<?php wp_list_pages('title_li=&depth=2&sort_column=menu_order') ?>
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘current_page_item not changing link text colour’ is closed to new replies.