Bootstrap 4, один из элементов навигации в моем классе navbar-collapse не меняет цвет фона, когда он активен - PullRequest
Новая
       106

Bootstrap 4, один из элементов навигации в моем классе navbar-collapse не меняет цвет фона, когда он активен

2 голосов
/ 14 июля 2020

Я пытаюсь изменить цвет фона активного элемента в раскрывающемся меню. Итак, я нацелен на навигационный элемент проходов, в котором есть раскрывающийся список для 8 различных категорий. Так, например, когда я работаю с фруктами и овощами, я хотел бы, чтобы цвет, окружающий эту категорию, был зафиксирован на нем, чтобы он указывал пользователям, что он находится в этой категории. Прямо сейчас Bootstrap 4 применяет синий цвет фона, но я хочу изменить его, чтобы он соответствовал моему веб-сайту.

Вот мой HTML код: 

<div class="collapse navbar-collapse nav-fill w-100" id="navbarNavDropdown">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="allproducts.html">All Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="summer.html">Summer Essentials</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="sale.html">SALE</a>
      </li>

     <li class="nav-item active dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data- 
         toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Aisles
        </a>
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: 
      #FF6347";>
        <a class= "dropdown-item active" href="aisle1.html"><span>Fruits & Vegetables</span></a>
        <a class="dropdown-item" href="aisle2.html"><span>Dairy & Eggs</span></a>
        <a class="dropdown-item" href="aisle3.html"><span>Meat & Poultry</span></a>
        <a class="dropdown-item" href="aisle4.html"><span>Snacks</span></a>
        <a class="dropdown-item" href="aisle5.html"><span>Bread & Bakery</span></a>
        <a class="dropdown-item" href="aisle6.html"><span>Beverages</span></a>
        <a class="dropdown-item" href="aisle7.html"><span>Cleaning & Household</span></a>
        <a class="dropdown-item" href="aisle8.html"><span>Beauty</span></a>
      </div>
   </li>



</div>

Не могли бы вы помогите мне добиться этого, спасибо.

...