Navigation bar - I want an efficient code for showing current page

HTML-CSS
1

Hello! This is my first post here! I’ve been in hiding trying to get to a point where I can justify asking for help haha. Anyway here’s my question:

  • Is there a code efficient way to let a user know what page a user is on using CSS on the navigation bar?

What I’ve had to do so far is:

  • write a line of CSS code on each HTML page, specifically modifying the style of the link on the navigation bar to a different colour
  <style> a.home {color: #808080;} </style> <!-- fudge code to get navigation context -->

This will obviously become tedious if I’m ever working on a site with tens of pages, and I’ve tried using :visited but once a user has clicked on more than one page, they all are styled differently and the context is lost.

Help or feedback greatly appreciated!

Thanks

D.W.

1 Like
2

You can create a class named “active” and style it the way you want the nav text to be color when it is present on an element. Then you just would add the “active” class to the relevant html page’s nav element.

3

Thank you for your help!

I guess I overlooked that and made this more complicated than it needed to be.

really appreciate this!

Cheers,

Don