Как изменить цвет моей активной навигационной ссылки на другой цвет? - PullRequest
0 голосов
/ 05 октября 2019

Как изменить исходный цвет (синий) на другой, например серый?

<div class="col-md-4 ftco-animate py-5 nav-link-wrap aside-stretch">
     <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
         <a class="nav-link px-4 active" id="v-pills-room-tab" data-toggle="pill" href="#v-pills-room" role="tab" aria-controls="v-pills-room" aria-selected="true"><i class="fas fa-bed"></i> Rooms</a>
         <a class="nav-link px-4" id="v-pills-event-tab" data-toggle="pill" href="#v-pills-event" role="tab" aria-controls="v-pills-event" aria-selected="false"><i class="fab fa-dribbble"></i> Events</a>
         <a class="nav-link px-4" id="v-pills-dining-tab" data-toggle="pill" href="#v-pills-dining" role="tab" aria-controls="v-pills-dining" aria-selected="false"><i class="fas fa-cocktail"></i> Dining</a>
         <a class="nav-link px-4" id="v-pills-policy-tab" data-toggle="pill" href="#v-pills-policy" role="tab" aria-controls="v-pills-policy" aria-selected="false"><i class="fas fa-feather-alt"></i> Policy</a>
     </div>
</div>

Ответы [ 3 ]

0 голосов
/ 05 октября 2019

Понятно, вы используете загрузчик, поэтому вы можете использовать цвета начальной загрузки , например bg-success :

<a class="nav-link px-4 active bg-success" id="v-pills-room-tab" data-toggle="pill" href="#v-pills-room" role="tab" aria-controls="v-pills-room" aria-selected="true"><i class="fas fa-bed"></i> Rooms</a>
0 голосов
/ 05 октября 2019

Вы можете изменить его с помощью css.

.active {
  color: #DCDCDC;   
}
0 голосов
/ 05 октября 2019

Это состояния ссылки на стиль в соответствии с вашими потребностями,

a:link - a normal, unvisited link
a:visited - link the user has visited
a:hover - link when the user mouses over it
a:active - link the moment it is clicked

Это будет применяться ко всем тегам a, если вы хотите сделать для определенного класса, как у вас естьВы можете использовать className и использовать эти свойства.

.nav-link px-4:active {
  color:grey;
};

Эта ссылка может дать вам больше идей, и вы сможете проверить ее там,

CSS ссылки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...