#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    Question CSS Problem: Change the link color of active page in Navigation


    I'm sure this is has been posted with solutions, but I'm very new to CSS so am looking for specific help related to the CSS sheet I am actually using.

    As a new user I can not post the URL of my page or css sheet.

    My problem:

    I want the navigation bar to indicate the active page by changing color.

    I have managed to make the color change on a mouse hover over:

    #nav a:hover {
    background: #FA0;
    text-decoration: none;
    color: #FFFFFF;
    }

    However, I do not know how to make it stay a different color to show which is the active page.

    Can you suggest anything?

    Many thanks.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    Try this


    a:active
    {
    background-color:#FFFFFF; /*color of your choice*/
    }

    Comments on this post

    • DonR agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    Still not working


    Hello Radenli,

    Thanks for helping.

    I placed the code you suggested below the code to change the color when using mouse hover. But it still didn't maintain a change in background color when on that particular active page.

    Am I doing something wrong?

    #nav a:hover {
    background: #FA0;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16pt;
    }

    #nav a:active
    {
    background-color:#FFFFFF; /*color of your choice*/
    }

    #nav a {
    text-decoration: none;
    text-transform: lowercase;
    color: #FA0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    You need to replace the color


    you need to replace the color code #FFFFFF; to other color you like.
    you are using "#FFFFFF"(white) on both :hover and :active, you will not see the color change.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    Do you have separate static HTML pages?
    If so, you will need to create a class of lets say "active" and give it a color of your choice. And in the navigation link of that ACTIVE page, add the attribute class="active".
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    The color white would still work.


    Originally Posted by radenli
    you need to replace the color code #FFFFFF; to other color you like.
    you are using "#FFFFFF"(white) on both :hover and :active, you will not see the color change.
    Hello Radenli,

    If I keep the color white "#FFFFFF", it would still work and show the user which page they were currently on, as the background to the navigation bar is actually dark blue.

    So this is not the solution.

    Thanks

    (I'm going to try the proposed solution below).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    A new class "active"


    Originally Posted by DonR
    Do you have separate static HTML pages?
    If so, you will need to create a class of lets say "active" and give it a color of your choice. And in the navigation link of that ACTIVE page, add the attribute class="active".
    Hello Don,

    I have created the new class, called it active and changed the colors to match what I want. However, how do I actually do the last part of your suggestion?

    (And in the navigation link of that ACTIVE page, add the attribute class="active".)

    Thanks
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    I need to know if all of your pages are separate HTML pages.

    And it would really help if we could see a link to your code or see your html code and a tree-view of all of your files [at least filenames as this would answer my above question].

    At least post your navigation code, please.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    Post Tree View of Files, HTML and CSS


    ...........................................................
    I will try to post what I believe will help.

    HTML Page with information about what is in the navigation bar: (I dont know why the new active class I made appears 3 times)

    ...........................................................


    <body>
    <span class="active"><span class="active"><span class="active">
    </span></span></span>

    <div class="active" id="bg">
    <div id="outer">
    <div id="header">
    <div id="nav">

    <ul>
    <li class="first">
    <a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
    <li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
    <li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
    </ul>

    <br class="clear" />
    </div>
    <img src="images/banner3.gif" width="981" height="69" alt="Web 2.0 Tools Logo" />
    </div>
    <div id="main">
    <div id="content">
    <div id="box1">

    ...........................................................
    And the CSS code for the navigation:
    ...........................................................


    #nav {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 57px;
    line-height: 57px;
    padding: 0 24px 0 24px;
    width: 932px;
    margin: 0 0 0 0;
    background: #08286e;
    }

    #nav a:hover {
    background: #FA0;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16pt;
    }

    #nav a:active
    {
    background-color:#FFFFFF; /*color of your choice*/
    }

    #nav a {
    text-decoration: none;
    text-transform: lowercase;
    color: #FA0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    }

    #nav li {
    margin: 0 1em 0 0;
    padding: 0 1em 0 1em;
    }


    #nav li.active {
    background: #fff;
    }

    #nav li.active a {
    color: #34564F;
    }

    #nav ul {
    list-style: none;
    }

    #nav ul li {
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    }

    ...................................................
    Summarised Tree View of Files

    ...................................................

    Site Name: Teacher Tools

    HTML Pages:
    - index.htm
    - tools.htm
    - contact.htm
    - style.css
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    ok, this is what we want to focus on.
    Code:
    <ul>
    <li class="first">
    <a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
    <li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
    <li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
    </ul>
    
    #nav li.active a {
    color: #34564F;
    }
    you can get rid of this
    Code:
    <span class="active"><span class="active"><span class="active">
    </span></span></span>
    
    <div class="active" id="bg">
    (unless you need the <div id="bg"> but get rid of that class="active" in that DIV.)
    --------------------------------------------------------------

    what you will want to do in each of your html files is to add the class="active" to the <li> item that corresponds to that ACTIVE page.

    For example, in your "index.htm" page you will want this
    Code:
    <ul>
    <li class="first active">
    <a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
    <li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
    <li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
    </ul>
    in your tools.htm file you want this
    Code:
    <ul>
    <li class="first">
    <a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
    <li class="active"><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
    <li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
    </ul>
    and in your contact.htm, you want this
    Code:
    <ul>
    <li class="first">
    <a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
    <li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
    <li class="active"><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
    </ul>
    then, just set the color to what you want in this
    Code:
    #nav li.active a { color: #34564F; }
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    Legend


    DonR = Legend

    Thank you so much. It works!


IMN logo majestic logo threadwatch logo seochat tools logo