I need assistance in restoring the default style of NavLink as shown in the screenshot below. The color should be white and without underlines. Here is my code snippet:
Home is currently selected as the default path, and the activeClass property is functioning correctly.
https://i.sstatic.net/Uf8Xr.png
The code:
const NavBar = () => {
return(
<div className="navBar">
<div className="logo">LOGO</div>
<div className="navOptions">
<ul>
<li>
<NavLink exact activeClassName="activeClass" to="/">Home</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="viewAll">View All</NavLink>
</li>
<li>Logout</li>
</ul>
</div>
</div>
);
}
export default NavBar;
The CSS:
.navBar {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
color: white;
font-weight: bold;
}
.logo {
display: flex;
flex: 1;
align-items: center;
padding-left: 50px;
}
.navOptions {
display: flex;
justify-content: flex-end;
flex: 1;
height: 100%;
}
//The li items don't have the color and text-decoration properties on them
li {
display: inline;
margin-right: 20px;
cursor: pointer;
height: 100%;
text-decoration: none;
color: white;
}
li:hover {
background-color: gray;
}
ul {
margin-right: 40px;
list-style-type: none;
}
.activeClass {
text-decoration: none;
color: purple;
}