WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Nav Bar Link colours - CSS Help required PLEASE (5 posts)

  1. mrkingid
    Member
    Posted 6 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 6 years ago #

    You need to add a new class to your css

    #nav li a.current_page_item {
    color: #8fbf60;
    }
  3. mendezki
    Member
    Posted 6 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 6 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 6 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.

About this Topic