CODEWITHSUNDEEP
javascriptcssreactjsbootstrap-4react-bootstrap
nour
nour

Reputation: 163

ReactJS 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:

mine

How it should be:

required

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;
}

Upvotes: 1

Views: 4489

Answers (2)

Ipaullly
Ipaullly

Reputation: 1

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'.

Upvotes: 0

Ashley Fernandes
Ashley Fernandes

Reputation: 1207

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.
enter image description here

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 enter image description here

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.

enter image description here

Upvotes: 2

Related Questions