CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
membersound
membersound

Reputation: 86925

How to add active css class to menu item?

https://www.bootply.com/XzK3zrPhJJ

In this example, why is the Home button not marked red?

.navbar a:hover,
.navbar a:focus,
.navbar a:active {
  color: red !important;
}
<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a href="/index.php" class="active">Home</a>
      <a href="#">Links</a>
      <a href="#">About</a>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 2506

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Use the css Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

.navbar a.active {
  color: red;
}
<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a href="/index.php" class="active">Home</a>
      <a href="#">Links</a>
      <a href="#">About</a>
    </div>
  </div>
</nav>

keep in mind that The :hover CSS pseudo-class

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

and avoid !important you can read more about !important_exception here

Upvotes: 1

ALFREDO GARCIA
ALFREDO GARCIA

Reputation: 1

I think, it should be like this:

navbar a:hover {
color:red;
font-weight:bolder;
text-decoration:underline;
}

Upvotes: -1

Edson Filho
Edson Filho

Reputation: 66

Why is it not active, but with active CLASS

instead of a:active use .active to reference, in this case you can also read more about the selector HERE

Upvotes: 0

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You shoud use not a:active but a.active

:after is a pseudo class. But you want to select a tags which also has .active class.

.navbar a:hover,
.navbar a:focus,
.navbar a.active {
  color: red !important;
}
<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a href="/index.php" class="active">Home</a>
      <a href="#">Links</a>
      <a href="#">About</a>
    </div>
  </div>
</nav>

Upvotes: 2

Related Questions