changing color of active tab on WP

Discussion in 'CSS' started by Barak, Mar 12, 2011.

  1. #1
    Hi,

    I'm customizing a wordpress header for a client and I have a horizontal nav bar
    I need the active tab to be highlighted when that tab is active

    How do I do that?
     
    Barak, Mar 12, 2011 IP
  2. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #2
    Add a class active @ the link in nav bar in your stylesheet
    e.g #navigation a.active { bgcolor:red}
     
    artus.systems, Mar 12, 2011 IP
  3. Barak

    Barak Greenhorn

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    I have it like that:
    #navmenu ul li a:active {color: #fff; background: #f00; }

    it doesn't work...

    The hover and regular a are responsive to changes but the active is not...
     
    Barak, Mar 12, 2011 IP
  4. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #4
    #navmenu ul li a.active {color: #fff; background: #f00; } /* here active is a class */

    and in your html file
    <ul>
    <li><a href="" class="active">Home</li>
    </ul>

    will make your link Home active
     
    artus.systems, Mar 12, 2011 IP
  5. Barak

    Barak Greenhorn

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Thanks, but I didn't fully understand...

    Just to clarify: this is wordpress, meaning the nav is defined in the header for all the pages and the page is in another "template" - like server side includes
    So I can't designate a class for the header items (nav items) on each page

    Another point - I do see the active color (red) when I click the nav item, but then it reverts to the "a" color
    I want that tab to stay highlighted so the visitor will know where he is
     
    Barak, Mar 13, 2011 IP
  6. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
  7. Barak

    Barak Greenhorn

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    wow... that's a bit over my head
    I don't know PHP

    This is the code of the menu items in the header:

    <ul>
    <li class="page1tab"><a href="http://domain.com/blog4/about">About</a></li>
    <li class="page2tab"><a href="http://domain.com/blog4/projects/">Projects</a></li>
    <li class="page3tab"><a href="http://domain.com/blog4/portfolio">Portfolio</a></li>
    <li class="page4tab"><a href="http://domain.com/blog4/blog/">Blog</a></li>
    <li class="page5tab"><a href="http://domain.com/blog4/our-office/">Our Office</a></li>
    <li class="page6tab"><a href="http://domain.com/blog4/contact">Contact</a></li>
    </ul>


    can you (or some other nice guy) instruct me on how to do it?
     
    Barak, Mar 13, 2011 IP