Hi guys,
Novice question.
Is there away to change a nav bar link to a different colour so a potential visitor would see which page they are on? So ultimately the link would need to revert back to the default colour when a different page link is chosen.
My nav bar works as it should through visited/hover/active but I’m struggling to find appropriate CSS to deal with my desired effect. Is it even possible with CSS styling or is this a job for jQuery?
Cheers
Yes. You add a class to the current page link and apply the styles to that. If you’re using plain HTML, you need to add the class on each page (so add it to the Index.html link on your home page, the contact.html link on your contact page, etc.). If you’re using something like a PHP include for the menu, you can add the class dynamically.
Thanks for the reply @TechnoBear,
So add a class like in my first link?
<div id="nav"> <ul> <li><a target="_blank" href="kitchen.html" class="navcolour">Home</a></li> <li><a target="_blank" href="kitchen-about.html">About</a></li> <li><a target="_blank" href="kitchen-installations.html">Installations</a></li> <li><a target="_blank" href="kitchen-brass-tacks.html">Brass Tacks</a></li> <li><a target="_blank" href="kitchen-modern.html">Modern Collection</a></li> <li><a target="_blank" href="kitchen-classic.html">Classic Collection</a></li> <li><a target="_blank" href="kitchen-quotes.html">Verba Vitae</a></li> <li><a target="_blank" href="kitchen-events.html">My Events</a></li> <li><a target="_blank" href="kitchen-contact.html">Contact</a></li> </ul> </div>
There is a topic here which covers a few methods for this.
Daz1966,
You may want to try the matching pairs technique. In this old example I am linking to, I used an ID in the <body> tag, nowadays I use a classname instead.
Yes - that’s what I had in mind. Add the class to the appropriate link on each page.
Another method is the one @ronpat suggested above. For some reason, it doesn’t seem to be linking properly, so here’s the link:
How do i make an active link stay the same color when the page has been visited - #13 by ronpat
Thank you all, I’ll work through you advice tips and report back, it’s always appreciated.
Hi guys,
Just wanted to let you know i solved this issue using the ‘matching pairs technique’ @ronpat suggested above. The penny took some dropping & inadvertently led me to do a bit of housekeeping, it works great though, thank you.
If a may ask another question;
I had a play with the php demo posted by @SamA74 but couldn’t get it to work, would this be because my files are only still local & would only work on a php enabled server?
Yes.
You can set up a local testing environment, either by installing the necessary components individually, or using a software bundle such as XAMPP.
Thanks once again @TechnoBear,
XAMPP installed, working & the php works, having fun now. 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.