WordPress.org

1. mrkingid
   Member
   Posted 5 years ago #
   

   In need of some more help with a theme modification :)

   The site is: http://artbymichaelking.com/

   1) In the Navbar I would like it to have whichever nav link selected to show up as a different colour than the rest.

   I have values for 'active' and 'hover' as well as a colour for all the text in the links. But what is the CSS for the current selected link to stay a selected colour? Damn, I hope that makes sense. :)

   More explanation... all navbar text is white. you hover over the text and it turns green, you click and hold and text turns red. I would like it to stay red as long as the user is on that page.

   my current CSS is like this:
   Text in nav bar is white
   #nav {
   background: #f5f5f5 url(images/nav.jpg) no-repeat;
   width: 800px;
   height: 16px;
   color: #FFFFFF;
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 8.5pt;
   font-weight: bold;
   margin: 0px auto 0px;
   padding: 7px 0px 7px 0px;

   }
   text turns to green on hover
   #nav a:hover {
   color: #8fbf60;
   font-weight: bold;
   text-decoration: none;
   }
   text turns to red on click
   #nav a:active{
   color: #8fbf60;
   text-decoration: none;
   }

   I cannot figure out what I need to do to make a selected page link show in a different colour.

2. Jeremy Clark
   Moderator
   Posted 5 years ago #
   

   You need to add a new class to your css
   

   #nav li a.current_page_item {
   color: #8fbf60;
   }

3. mendezki
   Member
   Posted 5 years ago #
   

   Try a search for 'highlighting current post'

   i.e. This thread deals with this, there is also some stuff in the Docs on Dynamic Menu Highlighting.

4. mrkingid
   Member
   Posted 5 years ago #
   

   Thanks to both of you. I placed this is my CSS file and it works great.

   #nav li.current_page_item a{
   color: #7a2323;
   }

   I needed to add the 'a" after 'item'

5. Jeremy Clark
   Moderator
   Posted 5 years ago #
   

   Yes good catch, I forgot that the class isn't applied the a tag itself but to the li.

Topic Closed

This topic has been closed to new replies.