Как изменить цвет активной ссылки Bootstrap

Question

У меня вертикальная навигация, которую я взял со страницы Bootstrap.Теперь, когда я нажимаю разные ссылки, я хочу изменить цвет активной ссылки и добавить к ней правую рамку.

Вот мой текущий код:

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    background-color: #f1f1f1;
}

<ul class="nav navbar-sidenav">
    <li class="nav-item active">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-tachometer-alt margin-r"></i>Dashboard</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>About</a>
    </li>
</ul>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answer 1

См. Пример здесь:

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    background-color: #f1f1f1;
}

.navbar-sidenav .nav-item.active{
  border-right: 5px solid #ff0000;
}

.navbar-sidenav .nav-item.active a{
  color: #ff0000;
}

.navbar-sidenav .nav-item:hover{
  border-right: 5px solid #ff0000;
}

.navbar-sidenav .nav-item a:hover{
  color: #ff0000;
}

<ul class="nav navbar-sidenav">
    <li class="nav-item active">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-tachometer-alt margin-r"></i>Dashboard</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>About</a>
    </li>
</ul>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answer 2

a: active {...}

Помните: «Любовь, Ха!»

:link
:visited
:hover
:active

Для достижения наилучших результатов стилируйте их в таком порядке