Создание кликабельных ссылок родительского уровня в Bootstrap и WordPress

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

Я нашел кучу решений, которые не работают для меня, вероятно, потому, что я скопировал кучу пользовательского кода из Интернета, чтобы попытаться заставить раскрывающийся список появляться при наведении и исчезать - я относительный новичок. (Если есть лучший способ заставить раскрывающееся меню исчезать, я весь в ушах). Кроме того, простые решения, такие как удаление классов, переключение данных и т. д., похоже, не работают для меня, поскольку я создал собственную тему в WP. Я мог бы не использовать их правильно.

Также у меня все в порядке с раскрывающимися списками, которые не работают на мобильных устройствах, я не использую их на мобильных устройствах.

Спасибо!

.dropdown .dropdown-menu{
    display: block;
    opacity: 0;

    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

.caret {
  display: none;
}

.navbar-default {
  background: transparent;
  border: 0px;
}

.navbar-default .navbar-collapse {
  text-align: center;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  border: 0px;
  overflow: hidden;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba (0,0,0,0);
  color: #ffffff;
}

.nav > li {
  padding: 0px 0px 0px 30px;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff;  
}

.navbar-default .navbar-nav > li > a:hover {
  color: #ffffff;
  text-align: center;
}

.navbar-default .navbar-nav > li > a:after {
  content:"\2588 \00a0 \00a0 \00a0 \00a0 \2588 \00a0 \00a0 \00a0 \00a0 \2588";
  color: #f7981b;
  font-size: 1px;
  padding-top: 4px;
  padding-left: 10px;
  text-indent: -10px;
  display: block;
  visibility: hidden;
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

.navbar-default .navbar-nav > li > a:hover:after {
  content:"\2588 \00a0 \00a0 \00a0 \00a0 \2588 \00a0 \00a0 \00a0 \00a0 \2588";
  font-size: 10px;
  padding-top: 4px;
  padding-left: 10px;
  text-indent: -10px;
  display: block;
  color: #f7981b;
  visibility: visible;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}


.nav > li > ul {
  position: absolute;
  padding: 0px;
  background: rgba(61,33,15,0.8);
  list-style: none;
}

.nav > li > ul > li {
  padding: 10px 30px;
  color: #ffffff;
  line-height: 20px;
}

.nav > li > ul > li:hover {
  background-color: #f7981b;
  color: #ffffff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}


.nav > li > ul > li > a:hover {
  background-color: #f7981b;
  color: #ffffff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.navbar-nav > li > .dropdown-menu {
  text-align: center;
}

.nav > li > ul > li > a {
  color: #ffffff;
  background: rgba(0,0,0,0,);
}

.nav > li > ul > li > a:hover {
  color: #ffffff;
  background: rgba(0,0,0,0);
  text-decoration: none;
}

.dropdown-menu > li > a {
  white-space: normal;
} 

.dropdown {
  text-align:center;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  background: rgba(0,0,0,0);
}

.button, .dropdown-menu {
  margin:0px auto
}

.dropdown-menu {
  width:180px; 
  left:50%; 
  margin-left:-85px;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba(0,0,0,0)!important;
  color: #ffffff!important;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba(0,0,0,0);
}



<div class="flex-container brown-80 hcenter">
            <div class="container-1300 pad-10 vcenter hcenter-nav">
              <div class="navbar-header brown-80">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="position: absolute; margin-left: -50px;">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
              </div>
        </div>
        <div class="container-1300 pad-10 vcenter hcenter-lg flex-container">
          <div class="flex-10-percent hcenter">
              <a href="/" class="logo-bg"></a>
          </div>
          <div class="flex-90-percent vcenter hcenter">
              <div class="collapse navbar-collapse fright-lg" id="bs-example-navbar-collapse-1">
                  <?php
                    wp_nav_menu( array(
                        'menu'              => 'header-menu',
                        'theme_location'    => 'header-menu',
                        'depth'             => 3,
                        'container'         => false,
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>

              </div><!-- /.navbar-collapse -->
           </div>
       </div>