Active is not working on link in css

Question

I am working on a navigation bar Active color on my navigation bar is not working.Hover is working fine but not the active.In when from browser i select toogle element state and click on active browser change the color on clicking active state but in normal condition its not working.i am stucked and very confused , can someone help me please ? Thanks in advance.

.main-nav {
  color: #FFF;
  width: 100%;
  background-color: #5e2d91;
  float: right;
  line-height: 42px;
  margin-top: -3px;
}
.main-nav ul li {
  display: inline;
  padding: 0px 10px;
}
.main-nav ul li a {
  color: #FFF;
  text-decoration: none;
  padding: 20px 14px;
}
.main-nav ul {
  margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
  background-color: #0098aa;
}
.main-nav ul li a:active {
  background-color: #0098aa;
}

<nav class="main-nav">
  <ul>
    <li><a href="one.php"> Home </a>
    </li>
    <li><a href="transaction.php"> Trade Now</a>
    </li>
    <li><a href="view.php"> Transactions  </a>
    </li>
    <li><a href="chart.php"> Performance </a>
    </li>
    <li><a href="complete.php">History </a>
    </li>
    <li class="time">US Markets Open in&nbsp;<span id="hm_timer" class="style    colorDefinition size_sm">08:05:35</span>&nbsp;hours</li>
  </ul>
</nav>

Have you verified the issue once through browser's inspect element? Its quite possible that you css rules are overridden by some other css. — , Oct 17 '16 at 05:35
Yaa could be because when i ran your code it works perfectly. May be your styles are getting overridden by something else — Geeky, Oct 17 '16 at 05:36
Your active color is same as hover. It's working but you can't see it. Change it to some different color. — , Oct 17 '16 at 05:45

score 0 · Answer 1 · answered Oct 17 '16 at 05:39

0

your code working fine on fiddle there is might be some other css overwriting your code

try this

body .main-nav ul li a:active{
   background-color:#0098aa;
}

if its not works try adding important // not recommended

body .main-nav ul li a:active{
   background-color:#0098aa!important;
}

I recommend you to inspect element on that link and check active state, there might be some other css overwriting ur code

answered Oct 17 '16 at 05:39

Rahul

4,294
1
10
12

@Nadeem...I guees you have the same colors for hover and active ,so thats why you cannot make any difference – Geeky Oct 17 '16 at 05:47
i also think so, try `body .main-nav ul li a:active{ background-color: red; }` – Rahul Oct 17 '16 at 05:48
css on active state is working fine on ur site @nadeem – Rahul Oct 17 '16 at 05:50

score 0 · Answer 2 · answered Oct 17 '16 at 05:50

In your code, the background-color for :active is same as hover, so it's working but you can't see it. Change it to some other color and it would work.

In case of your website, I don't see any CSS selector as :active. Are you sure you've written it there?

score 0 · Answer 3 · answered Oct 17 '16 at 05:57

0

In your site marketinthepocket.com you have mentioned background color as white. changing for color will work out.

body .main-nav ul li a:active {
    background-color: red;
}

answered Oct 17 '16 at 05:57

selvakumar

634
7
16

Active is not working on link in css

3 Answers3