I created a navigation bar in ReactJS and I need the tabs to stay highlighted when clicked, but the styles are not applying correctly. I have double-checked that the stylesheet is linked properly based on the Reactjs file structure.
For reference, I used this example: https://codepen.io/k3no/pen/OXgXOb?editors=0110
Navbar.js
import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap";
import {Link, BrowserRouter as Router} from 'react-router-dom';
const NavbarComponent = () => {
return (
<>
<nav variant='pills' className="navbar navbar-default navbar-static-top">
<ul className="nav nav-pills">
<li >
<Link activeclassname="active" to="/grocery">Grocery</Link>
</li>
<li >
<Link activeclassname="active" to="/fashion">Fashion</Link>
</li>
<li >
<Link activeclassname="active" to="/beauty">Beauty</Link>
</li>
<li >
<Link activeclassname="active" to="/footwear">Footwear</Link>
</li>
</ul>
</nav>
</>
)
}
export default NavbarComponent;
index.css
nav {
border-bottom: 4px solid black;
text-align: center;
position: relative;
top: 0;
width: 100%;
background: white;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
padding-top: 16px;
padding-bottom: 16px;
}
nav a {
text-decoration: none;
color: black;
font-weight: bold;
padding: 16px 32px;
}
.navbar .nav-pills >li >a {
color: black;
}
.navbar .nav-pills > li > a:hover {
background-color: gold;
color: black;
}
.navbar .nav-pills .active {
background-color: palevioletred;
color:Black ;
font-weight:bold;
}
Reference link: https://codepen.io/k3no/pen/OXgXOb?editors=0110
I am unable to identify the cause of the issue.