0
179
ViewsReactJS change the background color of the selected Navlink in a react bootstrap navbar
So I have a react-bootstrap navbar. I need to change the background color of the selected nav link. My Css is only coloring around the nav link title and not the whole space occupied by this navlink
my navbar:
How it should be:
My nav bar code:
const NavBar = () => {
let tabs = [
{ name: "Warehouses" },
{ name: "Dispatched to Process" },
{ name: "Sales" },
{ name: "User Manager" },
{ name: "Time Tracking" }
];
return (
<>
<Navbar fixed="top" bg="primary" variant="dark">
<Nav className="me-auto">
{
Object.keys(tabs).map(id => {
return <NavLink className="my-navbar" to={"/" + tabs[id].name}> {tabs[id].name} </NavLink>
})
}
</Nav>
</Navbar>
</>
);
}
export default NavBar;
and finally my nav.css
.my-navbar{
height: 100%;
margin: 15px 15px 15px 15px;
color: white;
font-size: 14px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: none;
}
.me-auto{
height: 100%;
}
.my-navbar:visited {
height: 100%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
}
.active {
height: 100%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
font-size: 14px;
background-color: #61fb69;
}
2 answers
Answer question0
The navbar in react-bootstrap already has its own top/bottom padding, so you will have to remove it and give it a height to compensate for the removed padding.
Next you will have to give all the parent elements of the navitems a height of 100% so that they occupy the full height
height: 100%;
align-items: center;
You can see here, by default it does not occupy the full height
Add this css for the .active class
height: 100%;
align-items: center;
font-weight: 800;
display: flex;
background-color: #61fb69;
This is what I was able to achieve.
0
Try adding the padding for the my-navbar:hover to say padding: 20px 10px. Keep adjusting the first value until the height for NavLink<NavLink /> fits that of the <Nav>'Nav'.