Как интегрировать меню bootstrap 4 в wordpress?

Question

[psvghg]

Мне надо это интегрировать со всеми классами, которые есть.

<!-- Меню-->
  <nav class="navbar navbar-expand-md"> <!-- nav -->
  <div class="container"><!-- container-->
    <p class="logo_aboutMenu">Проф. ремонт бытовой техники</p>
      <!-- скрывает, открывает меню на планшетах -->
        <button id="sidebarCollapse" class="navbar-toggler navbar-dark">
          <span class="navbar-toggler-icon"></span>
         </button>
       
      <!-- /скрывает, открывает меню на планшетах -->
    <div class="sidebar" id="sidebar">
      <div id="close-menu"> <!-- крестик на планшетах и телефонах-->
        <i class=" fa-1x fa-times far closes_close"></i>
      </div> <!-- /крестик на планшетах и телефонах-->
      <ul class="navbar-nav"><!-- ul-->
        <li class="nav-item"><!-- li-->
          <a href="" class="nav-link menu_a"><span>Главная</span></a>
        </li><!-- li-->
        <li class="nav-item"><!-- li-->
          <a href="" class="nav-link menu_a"><span>Услуги</span></a>
          <div class="pod_menu " ><!-- под меню-->
             <a href="" class="pod-item">Ремонт холодильников</a>
             <a href="" class="pod-item">Ремонт стиральных машин</a>
             <a href="" class="pod-item">Ремонт посудомоеч. машин</a>
         </div>
        </li><!-- li-->
        <li class="nav-item"><!-- li-->
          <a href="" class="nav-link menu_a"><span>Обзоры</span></a>
        </li><!-- li-->
        <li class="nav-item"><!-- li-->
          <a href="" class="nav-link menu_a"><span>Бренды</span></a>
          <div class="pod_menu_brend"><!--  div cont brend-->
            <div class="brend-item "><!-- item div-->
              <a href="" class="brend-a">AEG</a>
              <a href="" class="brend-a">Ardo</a>
              <a href="" class="brend-a">Ariston</a>
              <a href="" class="brend-a">Asko</a>
              <a href="" class="brend-a">Beko</a>
              <a href="" class="brend-a">Bosch</a>
              <a href="" class="brend-a">Candy</a>
            </div><!-- /item div-->
            <div class="brend-item">
              <a href="" class="brend-a">Electrolux</a>
              <a href="" class="brend-a">Gorenje</a>
              <a href="" class="brend-a">Hansa</a>
              <a href="" class="brend-a">Indesit</a>
              <a href="" class="brend-a">Kaiser</a>
              <a href="" class="brend-a">Krona</a>
              <a href="" class="brend-a">LG</a>
            </div><!-- /item div-->
            <div class="brend-item"><!-- item div-->
              <a href="" class="brend-a">Miele</a>
              <a href="" class="brend-a">Samsung</a>
              <a href="" class="brend-a">Siemens</a>
              <a href="" class="brend-a">Smeg</a>
              <a href="" class="brend-a">Whirlpool</a>
              <a href="" class="brend-a">Zanussi</a>
              <a href="" class="brend-a">Vestfrost</a>
            </div><!-- /item div-->
            <div class="brend-item"><!-- item div-->
              <a href="" class="brend-a">Neff</a>
              <a href="" class="brend-a">Liebherr</a>
              <a href="" class="brend-a">Kupperbusch</a>
            </div><!-- /item div-->

          </div><!-- / div cont brend-->
        </li><!-- li-->
        <li class="nav-item"><!-- li-->
          <a href="" class="nav-link menu_a"><span>Контакты</span></a>
        </li><!-- li-->
       
      </ul><!-- ul-->
    </div>
  </div><!-- container-->

  </nav>
  <!-- Меню-->

.menu_a {
  margin-left: 11px;
  padding: 30px;
  font-size: 23px;
  color: #ffffff;
}
.menu_a:hover {
  color: #202020;
  background: #ffffff;
}
.menu_a span {
  margin-left: 15px;
  margin-right: 15px;
}
li > div {
  /* Под меню */
  position: absolute;
  background: #ffffff;
  display: none;
  z-index: 2;
}
.pod-item {
  font-size: 20px;
  color: #202020;
  padding: 20px 15px;
}
.pod-item:hover {
  color: #ffffff;
  background: #0166ff;
  text-decoration: none;
}
.pod-a:hover {
  text-decoration: none;
}
.navbar li:hover > div {
  /* При наведении выпадает меню */
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  margin-bottom: 20px;
}
.pod_menu_brend {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.brend-item {
  display: none;
}
.brend-a {
  font-size: 20px;
  color: #202020;
  padding: 20px 15px;
  width: 200px;
}
.brend-a:hover {
  color: #ffffff;
  background: #0166ff;
  text-decoration: none;
}
li:hover > .pod_menu_brend {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-flex-direction: row !important ;
  -ms-flex-direction: row !important ;
  -o-flex-direction: row !important ;
  -webkit-box-orient: horizontal !important ;
  -webkit-box-direction: normal !important ;
          flex-direction: row !important ;
}
li:hover > .pod_menu_brend .brend-item {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

Помогите пожалуйста!!!!!!!!!!!!!!!!!!1

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Вот, кастомный walker для bootstrap 4
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Вот полезная статья - https://habr.com/ru/post/312704/
вот, еще walker - https://github.com/jprieton/wp-bootstrap4-navwalker

Answer 2

[Александр Осадчий]

На самом деле это не сложно, нужно всего-лишь через functions.php создать произвольное меню (wp_nav_menu) и обернуть его в классы boostrap..ну и вероятно немного переделать стили