I've been utilizing the react-bootstrap NavDropDown component from this source. Although I initially set it up correctly, I'm struggling to customize the background color of the navdropdow-items when they are in their normal or active (selected) state.
For instance, I want to switch from using blue to a different color when an option is selected, similar to what's depicted in this image.
Is there a way for me to achieve this? Perhaps through CSS if there isn't an existing class or attribute in bootstrap for it.
Navbar.js
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="/master">Hi {user.sub}</Navbar.Brand>
<Nav className="me-auto">
.
.
.
.
.
.
<NavDropdown drop="down-centered" menuVariant="dark" title="3P-Verticals" id="navbarScrollingDropdown">
{
verticals_3p.map((item)=> {
return(
<NavDropdown.Item key={item.val}>
<Nav.Link onClick={()=>props.setTenantName(item.val)}>{item.label}</Nav.Link>
</NavDropdown.Item>
)
})
}
</NavDropdown>
.
.
.
.
.
.
</Nav>
</Container>
</Navbar>
I attempted to address this in my App.css, but unfortunately, it's not yielding the desired results.
#navbarScrollingDropdown:active {
font-weight: bold;
}