Trying to change the background color and text color for the current link

Question

I am trying to change the background color and text color when a link in a nav bar is pressed.

i used the .currentLink style but it is still not applying to the current link. I'm sure i am missing something simple but cant seem to find any help in my coding books or online tutorials.

This is what i have so far in the css style sheet but it is not working still:

CSS:

nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

.currentLink {
   color: #aa0000;
   background-color: #007700;
}

HTML:

<nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>

the currentLink class does not seem to be used in the markup. — Pavan, Sep 18 '20 at 09:32
Does this answer your question? [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — SeeoX, Sep 18 '20 at 09:46

score 1 · Accepted Answer · answered Sep 18 '20 at 09:33

use this code

nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}


nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   <nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>
  </nav>

if you want keep color and format.. you need to use js... you can fllow the [link](https://stackoverflow.com/questions/63423341/menu-active-in-static-html-page/63424587#63424587).. i made it by js - menu active in static html page — نور, Sep 18 '20 at 09:45

score 0 · Answer 2 · answered Sep 18 '20 at 09:41

If you are using a framework like bootstrap or similar, it may be that the styles are being stepped on, in this case you can use !important in your css to step on the styles of the framework:

nav ul.horizontal > li > a:active {
    color: #aa0000 !important;
}

Trying to change the background color and text color for the current link

2 Answers2