Bootstrap Свернуть меню / Раскрывающееся меню Цвет вопрос

Question

Добрый день! В настоящее время я работаю над панелью навигации, но всплывающее меню при нажатии на значок гамбургера (который показывает все ссылки / элементы навигации в виде меньшей ширины экрана) немного слишком безвкусно / не очень хорошо на уровне представления , Как настроить выпадающее меню, чтобы оно выглядело лучше? HTML код ниже:

<nav id="navigation" class="navbar navbar-expand-sm">
  <a href="#" class="navbar-brand">Brand</a>
  <button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
    <span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
  </button>
  <div id="collap-menu" class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li><a class="nav-link" href="#">Etsy</a></li>
      <li><a class="nav-link" href="#">Facebook</a></li>
      <li><a class="nav-link" href="#">Instagram</a></li>
    </ul>
  </div>
</nav>

На какой элемент я нацеливаюсь, или, вернее, как я могу настроить лучшее выпадающее меню? Я заметил, что значок гамбургера при нажатии также поднимает элементы навигационной панели вверх, когда отображается

Answer 1

Трудно точно знать, как консультировать вас по стилю, так как мы не можем точно увидеть, какие стили вы просматриваете в данный момент, просто HTML. Используя ядро ​​Bootstrap CSS, я могу приблизить ваше мнение и дать соответствующий совет.

Допустим, вы хотите изменить фон и цвет текста для каждого из ваших пунктов меню:

#collap-menu li{
  background: #666;
  padding-left: 20px;
}

#collap-menu li a{
  color: #fff;
}

Это установит ваши пункты меню на сером фоне с белым текстом с небольшим дополнительным интервал для текста. Вы можете заменить цвета здесь на фирменные цвета вашего сайта. Любые изменения помимо изменения текста и цвета должны быть специально изложены в вашем запросе.