Как использовать 2 раза один и тот же элемент(Bootstrap)?

Question

[Perviz Salmanov]

Коллеги здравствуйте, есть такой элемент/разметка:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Домой</a></li>
          <li><a href="#">Про нас</a></li>
          <li><a href="#">Сервсиы</a></li>
          <li><a href="#">Работы</a></li>
          <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>

Я его уже 1 раз использовал нужно этот же элемент использовать ещё раз, для второго меню но тут проблема в том что классы то одинаковые при изменении какого-то цвета элемента или убирании background меняется у обоих, так же при уменьшении экрана при клике на адаптивное меню открываются оба сразу.

Answer 1

[Андрей Прозоров]

" при изменении какого-то цвета элемента или убирании background меняется у обоих" - переопределять свойства через классу бустрап по меньшей мере не корректно. навесьте свои классы и делайте с ними что хотите

Answer 2

[Павел]

Задать в плашке доп. класс

<div class="navbar new-menu navbar-inverse navbar-fixed-top">

После править стили как:

.navbar.new-menu {стили}
.navbar.new-menu .navbar   {стили}

И т.д.