Подчеркивание стиля Navbar - PullRequest
Новая
       52

Подчеркивание стиля Navbar

1 голос
/ 27 января 2020

У меня есть панель навигации, которая анимирует подчеркивание, когда пользователь наводит курсор на ссылку. Я пытаюсь добавить css, чтобы активная навигационная панель имела постоянное подчеркивание.

Мой код 

<Navbar className="navbar-expand-sm navbar-toggleable-sm" light>
                <Container id="ContainerGrnH">
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
            <div class="topnav">
              <ul className="navbar-nav flex-grow">
                <NavItem>
                  <NavLink tag={Link} className="text-white"  to="/home">HOME <div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/people-profiles">PEOPLE PROFILES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/Role-types">ROLE TYPES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/support">SUPPORT<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" id="contactushead" to="/contact-us">CONTACT US<div className="underline"></div></NavLink>
                </NavItem>
                </ul>
                </div>
            </Collapse>
          </Container>
            </Navbar> 

.topnav ul a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
    transition: color 0.5s;
}
.topnav ul li .underline {
    height: 3px;
    background-color: transparent;
    width: 0%;
    transition: width 0.2s, background-color 0.5s;
    margin: 0 auto;
}

.topnav ul li.active-link .underline {
    width: 100%;
    background-color: white;
}

.topnav ul li:hover .underline {
    background-color: white;
    width: 100%;
}

.topnav ul li:hover a {
}

.topnav ul li:active a {
    transition: none;
    color: rgba(255,255,255,0.76);
}

.topnav ul li:active .underline {
    transition: none;
    background-color: rgba(255,255,255,0.76);
}

Скорее всего, это небольшая ошибка, но я немного потрудился и, похоже, не могу найти много решений.

enter image description here

Как видно из изображения, слово home должно быть подчеркнуто, так как было выбрано home.

Ответы [ 2 ]

3 голосов
/ 27 января 2020

Используете ли вы NavLink реактивного маршрутизатора-дом?

Если это так, на самом деле существует реквизит activeClassName, который можно использовать для определения маршрута, который посещается в данный момент. 

<NavLink tag={Link} className="text-white" exact activeClassName="underline" to="/people-profiles">PEOPLE PROFILES</NavLink>

и в ваших css

.underline {
 border-bottom-width: 2px;
}

Не забудьте добавить точный в реквизитах NavLink, чтобы правильно соответствовать маршруту.

подробнее здесь: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

0 голосов
/ 27 января 2020

Возможно, вы захотите добавить activeClassName="underline" к вашему NavLink. И знай, что ты не лежишь в основе CSS. Как это сделать в ответе @crmacarse.

...