0

I do realise that what i am trying to achieve is partly covered in the 'topic' here: How to change link colour of the current page

I have read through it thoroughly and it has solved part of my problem but not completely,

Background info on my question - I have a navigation bar created using an unordered list and I have both the 'hover' state and 'active' state set with different background colours.

  • On 'hover' my link text changes colour from grey to white and a background colour of grey appears to contrast the text.

  • On 'active' the background colour turns red with the text staying white.

What I would like to be able to do is have the current pages navigation link keep the 'active' states colour scheme.

From the research i have already done I have been able to apply a class to just the 'current' link on each html page, doing this has solved part of my problem, giving my current pages link a red background, in the class I have defined both the background colour and text colour, but only the background colour works and the text colour stays it's original grey colour.

So my class isn't able to over-ride the previously defined text colour that it is (when not hovering or active)

I have also tried using a span tag on the current link to over-ride, but this goes to far and completely over rides my layout scheme, which is very reliant on the ids i have applied to both the 'ul' and 'li' tags within my navigation div.

If someone has a practical solution to this i would be very grateful, i am open to using javascript if that will make things easier. as i have scripting in my site already

Here is snippet my html and css properties: All i need to be able to do is have that text stay white for current page.

Ben loader

#TopNav{
 height: 100px;
 width: 640px;
 float: right;
 background-color: #FFF;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 16px;
 font-weight: bold;
}

#TopNav ul{
 float: right;
 margin: 0px;
 padding: 0px;
 position: relative;
 list-style-type: none;
}

#TopNav ul li:first-child{
 float: left;
 border-left-style: none;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
}

#TopNav ul li{
 display: inline-block;
 float: left;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #EEE;
 margin-top: 30px;
 margin-bottom: 30px;
 line-height: 20px;
}

#TopNav ul li a{
 text-decoration: none;
 color: #676767;
 padding: 10px;
 display: block;
}

#TopNav ul li a:hover{
    background-color: #444444;
 color: #FFF;
}

#TopNav ul li a:active{
 background-color: #FF605A;
}

a.currentlink {
 background-color: #FF605A;
 color: #FFF;
}
  <nav id="TopNav">
    <ul>  
      <li><a class="currentlink" href="Home.html">Home</a></li><li>
      <a href="About.html">About</a></li><li>
      <a href="Services.html">Services</a></li><li>
      <a href="Music.html">Music</a></li><li>
      <a href="Videos.html">Videos</a></li><li>
      <a href="Resources.html">Resources</a></li><li>
      <a href="Contact.html">Contact</a></li> 
    </ul><!--end of ul -->
   </nav><!--end of TopNav-->
Community
  • 1
  • 1
Ben Loader
  • 1
  • I'm a bit onfused, I thought all you need is the :active pseudo-class. – Charles Oct 18 '14 at 02:45
  • As in: #TopNav ul li a:active{ background-color: #FF605A; color: white; } – Charles Oct 18 '14 at 02:48
  • Yea that is just when the link is clicked on though, it doesn't stay in that state, i haven't reapplied the white text there as it keeps the 'hover' state text colour of white anyway. I would like it to stay with the white text and red background for the current pages link, at the moment i can get as far as the red background but it still keeps the parent div's text colour of grey. – Ben Loader Oct 18 '14 at 02:58
  • I apologise if my wording of the question is a bit confusing, im very new to this stuff, if you run the snippet you will see what i have currently, just need that text to be white on that home link. I will apply the rule to each link on it's corresponding html page as well, once i can figure out how to code it properly. – Ben Loader Oct 18 '14 at 03:09
  • Now, that as long as my math note for an entire semester cant u make it brief – Ghostff Oct 18 '14 at 03:21
  • @BenLoader Try this article: http://alt-web.com/Articles/Persistent-Page-Indicator.shtml. It involves adding different classes to all links and then adding those classes to the body for each page. so the home page link might have class home, and in the body tag, you add that class. – Charles Oct 18 '14 at 03:28

2 Answers2

0

If you share a common header then you can use php variables to achieve what you want.

Example: 

<li <?php if($page == "home") echo "class='active'?>
<a href="#">Home</a>
</li>

<li <?php if($page == "about") echo "class='active'?>>
<a href="#">About</a>
</li>

Then in your index.php, you can set the variable like so:

<?php $page=="home" ?>

In your about us page, you would do the same:

<?php $page=="about" ?>

Then all you would have left to do, is style the link as php would already have taken care of the conditional

CSS

 .active {....}
Charles
  • 427
  • 3
  • 6
0

@Charles Thank you very much

I used the method from the link you posted above alt-web.com/Articles/Persistent-Page-Indicator.shtml yet it still gave me the same result as I originally had.

But in doing this it allowed me to then to instead remove the color: #676767; from my CSS id #TopNav ul li a- and instead just define the link colour separately in my CSS as a without the #TopNav ul li and problem solved, it works perfectly, thank you for the push in the right direction.

Ben Loader
  • 1