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: https://www.animalwebdesigns.co.uk/wordpress/

    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;
  }

.current_page_item{
	color:#FFF;
	text-decoration:underline;
}

    Anyone got any clues?
    Thanks in advance,
    Adam

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; }

    Thread Starter animalraw

    (@animalraw)

    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!

    Thread Starter animalraw

    (@animalraw)

    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.

    https://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

    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="https://www.facebook.com/atari" target="_blank"><img src="<?php bloginfo('template_url');?>/img/PR_nav_facebook.gif"/></a></li>
  </ul>
</div>

    My code for the nav css is as follows:

    /* Begin Nav */
.menu{
	margin:0;
	padding:0;
	list-style-type:none;
}
.page_item{
	font-size:12px;
	float:left;
	padding:9px 15px;
	background:url('../../img/PR_nav_div.gif') no-repeat top right;
}
.page_item> a:link, .page_item> a:visited{
	color:#fff;
}

.page_item> a:hover{
	color:#f45ee4;
}
.current_page_item{
	color:#00FF00
}

/* 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{
	color:#f45ee4;
}

    Any thoughts or ideas??

    Fixed my issue.

    #nav .current_page_item a:link, #nav .current_page_item a:visited{
	color:#00FF00
}

    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') ?>
</ul>
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘current_page_item not changing link text colour’ is closed to new replies.