How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

StackOverflow https://stackoverflow.com/questions/22490994

  •  17-06-2023
  •  | 
  •  

Question

So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.

I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.

Any help would be great!

Was it helpful?

Solution

add an id attribute to the body tag of each of your pages, like this:

<body id="home"> <!-- this would be for your home page for example -->

...

<body id="about"> <!-- this would be for your about page... -->

add the same to the li tags of your nav, like this:

<li id="home">Home</li>
<li id="about">About</li>

then in the CSS file just do this:

body#home li#home, body#about li#about { // style of the active menu item }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top