Блог

Итак, у меня есть навигационная панель react-bootstrap. Мне нужно изменить цвет фона выбранной навигационной ссылки. Мой Css окрашивает только заголовок навигационной ссылки, а не все пространство, занимаемое этой навигационной ссылкой

моя навигационная панель:

мой

Как это должно быть:

требуемый

Мой навигационный штрих-код:

 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;
 

и, наконец, мой 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;
}
 

Навигационная панель в react-bootstrap уже имеет собственную верхнюю/нижнюю обивку, поэтому вам придется удалить ее и придать ей высоту, чтобы компенсировать удаленную обивку.

Затем вам нужно будет придать всем родительским элементам navitems высоту 100%, чтобы они занимали всю высоту

 height: 100%;
align-items: center;
 

Вы можете увидеть здесь, по умолчанию он не занимает всю высоту

Добавьте этот css для класса .active

 height: 100%;
align-items: center;
font-weight: 800;
display: flex;
background-color: #61fb69;
 

Это то, чего я смог достичь.

Попробуйте добавить дополнение my-navbar:hover , чтобы сказать padding: 20px 10px . Продолжайте регулировать первое значение до тех пор, пока высота для NavLink<NavLink /> не будет соответствовать высоте <Nav>'Nav' .