CODEWITHSUNDEEP
css
Ryder Thacker
Ryder Thacker

Reputation: 1482

Active/Current Navigation Link not working

I'm trying to implement Active/Current Navigation Link so that what a user is active on a certain nav link it should be green showing they are currently on that page. My problem is it's not doing anything. Here is my fiddle https://jsfiddle.net/n83qwbpf/1/ and here is the w3 school page I am getting my example from which I copied but not working.https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

CSS

 <!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

Upvotes: 0

Views: 1152

Answers (2)

supriya suresh g
supriya suresh g

Reputation: 385

<!DOCTYPE html>

<html>
    <head>
        <title>Ryder Practice</title>
        <link rel="stylesheet" type="text/css" href="/inc/styles/styles.css">
    </head>
    <body>

        <ul class="menuBar">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
    </body>
</html>


<!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

li .active {
    background-color: #4CAF50;
}

div.menuBar li.active a { color: #FF0000; } 

li.active { background-color: red; }

Upvotes: 1

vivek manavadariya
vivek manavadariya

Reputation: 230

You forgot to add an active class on the menu.

Upvotes: 1

Related Questions