I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this?
Here is what's currently happening:
Active nav styles (looks good) https://i.sstatic.net/sSoGN.png
When I hover over the active nav (want the text to be white) https://i.sstatic.net/KZ6b1.png
<NavLink
to="/games"
className='nav-link'
style={({ isActive }) =>
isActive
? {
color: '#0E1333',
borderBottom: 'solid 2.5px #0E1333',
paddingBottom: 2.5
}
: {}
}
>
<img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
Games
</NavLink>
Stylesheet
.nav-link {
text-decoration: none;
background-color: white;
color: #0E1333;
font-family: 'Gilroy-ExtraBold';
font-size: 18px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
padding-left: 25px;
padding-right: 25px;
}
.nav-link:hover {
background-color: #0E1333;
color: #fff;
}
I've tried...
a.nav-link.active:hover {
color: white
}