CSS Navigation Bar - Active Class in Navigation bar unable to function properly-CodePudding

adding an active class to my code currently isn't working for some reason.

Here's my code:

ul {
    list-style-type: none; /* removes the bullet points, as navigation bars don't need bullet points */
    margin: 0; /* removes the margin from the nav bar */
    padding: 0; /* removes the padding from the nav bar */
    overflow: hidden;
    background-color:#2D2D6F; /* controls main nav bar colour */
    position: sticky; /* makes the nav bar sticky */
}

li {
    display: inline; /* makes the text go all across the page, rather than down */
    float: left; /* similar to line above */
    border-right:1px solid #7070A6; /* controls border between link colour */
}        

li a {
    display: block;
    color: white; /* controls nav bar text colour */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #14144F; /* Changes the colour of the shade when the object is shaded */
    color:white; /* Changes colour of text when mouse hovers on said nav bar link */
} /* When mouse is hovered on a nav bar object, the code in this function occurs */

.active {
    background-color: #04AA6D;
}

I'm trying to add an active class so that the user is able to see what page they are on, however it isn't really working.

All help is welcome.

edit: Here's HTML:

<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #4A4A8A;"
</body>
<body>
    <ul>
        <li><a href="index.html">Homepage</a></li>
        <li><a href="Motherboard.html">Motherboard</a></li>
        <li><a href="wacom_tablet.html">Wacom Drawing Tablet</a></li>
        <li><a href="assistive_technologies.html">Assistive Technologies</a></li>
        <li><a href="bibliography.html">Bibliography</a></li>
    </ul>



<br><br><br><br><br><br>
Homepage
</body>


</html>

CodePudding user response：

Step 1: Remove obsolete tags

Step 2: Add active class where you need it.

This should work, now for each page you will have to add the active class to a different "a" tag in the "ul" "li" tags.

Does this help?

<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #4A4A8A;">
    <ul>
        <li><a  href="index.html">Homepage</a></li>
        <li><a href="Motherboard.html">Motherboard</a></li>
        <li><a href="wacom_tablet.html">Wacom Drawing Tablet</a></li>
        <li><a href="assistive_technologies.html">Assistive Technologies</a></li>
        <li><a href="bibliography.html">Bibliography</a></li>
    </ul>



<br><br><br><br><br><br>
Homepage
</body>


</html>

CodePudding user response：

Please add your HTML too, this way we can see how you attach and where the .active class.