Issue with current menu states in css, please help!


On my menu there is a number of ‘buttons / tabs’ and if say you are on the contact page the contact tab is be a different colour to the rest of the menu…

I done this by assigning a ‘current’ id which changes on each page.

…The problem is the site has grown (enormously) and I need to make separate headers and footers and then just call them into each page i.e. <?php include ‘header.php’; ?> …with this method is there any way of identifying the current page?

all help appreciated!


Yes there is! You do it with a simple CSS trick. On the <body> tag of each page, put a unique class, e.g. class=“contact” for the Contact page, class=“home” for the Home page etc.

Then on the list items of the menu (if you are using LI, and you should be :slight_smile: ), also put a unique class or id. (I prefer ids for this.) E.g.

<li id="contact">

Now, you will already have a rule for styling the menu items, such as

li a {color: red}
li a:hover {color: blue}

So let’s say you want the menu item to be blue when the page is current too, without hovering. Then you do this:

.contact li#contact a {color: blue}

That way, the CSS is saying that the <a> inside a LI with an id of “contact” should be blue if the <body> tag has a class of “contact”. This more specific rule will override the standard rule that says to make the menu item red.

That way, you only have to code the menu once, and add it to each page unchanged via the PHP include.

Does that make sense?

Thanks so much, worked perfect!
I was so close but had my selectors a bit messed up, was about to give up and go down the php / js route… which is never fun :slight_smile:

Glad that helped. :slight_smile: