How to change the background color of Active links in a menu bar?

Question

I copied the following code from w3schools.com and added it to all pages on my website. Navigation is working fine, but Background color of active links in the menu doesn't change.

How can I fix this?

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7A991A; }

<ul> <li> <a href="/home.php">Home</a> </li> <li> <a href="/news.php">News</a> </li> <li> <a href="/contact.php">Contact</a> </li> <li> <a href="/about.php">About</a> </li> </ul>

Do you have news.php, contact.php etc seperately with the menu. If it is unique on all the page then you can just style it based on the page. If no you can achieve it through JS or jquery. — sasi
– sasi, Commented May 7, 2015 at 7:36

Pugazh · Accepted Answer · 2015-05-07 07:46:42Z

You would need to add a CSS class on the active page. Here i added class="active"

Change CSS as below

a:hover, a:active, a.active { background-color: #7A991A; }

On home.php change the navigation code as below.

<ul> <li> <a href="/home.php" class="active">Home</a> </li> <li> <a href="/news.php">News</a> </li> <li> <a href="/contact.php">Contact</a> </li> <li> <a href="/about.php">About</a> </li> </ul>

On news.php make the change as below, Similarly for other pages

<ul> <li> <a href="/home.php">Home</a> </li> <li> <a href="/news.php" class="active">News</a> </li> <li> <a href="/contact.php">Contact</a> </li> <li> <a href="/about.php">About</a> </li> </ul>

Collectives™ on Stack Overflow

How to change the background color of Active links in a menu bar?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related