I am building a responsive website using React Bootstrap. I would like to change the color of the drop down menu once collapsed, and remain transparent once it is not collapsed.
The drop down menu once collapsed is transparent so I changed the css for navbar-collapse.
.navbar-collapse { background-color: #8d8d8d !important; }
Which changed the color but once it is not collapsed its still remains gray. So my question is...how do I change the color only when its collapsed? or clicked?
Problem:
Expectations:
This is my code of the NavBar as well
<Navbar collapseOnSelect className="ms-auto navbar navbar-light navbarSupportedContent" expand="lg">
<Navbar.Toggle className="ms-auto navbar-toggler "/>
<Navbar.Collapse className='collapse navbar-collapse navbar.collapsing'>
{menuToBeRendered.map((menu) => {
const isActive = location.pathname === menu.path
return <Nav className={`d-flex menu-item nav-link ${isActive && 'active-menu-item'}`}>
<Nav.Item className='ms-auto'>
<Link to={menu.path}>{menu.name}</Link>
<i className={menu.icon}></i>
</Nav.Item>
</Nav>
})}
</Navbar.Collapse>
</Navbar>
I hope I explained this correctly. Thanks to anyone that may assist me.
