WordPress.org

Ready to get started?Download WordPress

Forums

current_page_item not changing link text colour (9 posts)

  1. animalraw
    Member
    Posted 5 years ago #

    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: http://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

  2. Simon Fairbairn
    Member
    Posted 5 years ago #

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

  3. animalraw
    Member
    Posted 4 years ago #

    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!

  4. animalraw
    Member
    Posted 4 years ago #

    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!

  5. Simon Fairbairn
    Member
    Posted 4 years ago #

    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.

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

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

  6. taliesin1077
    Member
    Posted 4 years ago #

    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.

  7. elanio
    Member
    Posted 4 years ago #

    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="http://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??

  8. elanio
    Member
    Posted 4 years ago #

    Fixed my issue.

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

    Did the trick.

  9. Dan Masters
    Member
    Posted 4 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic