Warum zeigt das ausgewählte Element im Bootstrap-Dropdown in WordPress nicht an?

Question

Ich verstehe nicht, warum das ausgewählte Element im Bootstrap-Dropdown-Menü in WordPress nicht angezeigt wird? Meine Website: http://nauglyahh.ru/en/blog/. Es sollte so funktionieren: http://www.bootply.com/62811

mein Menü Code:

<?php 
     wp_nav_menu(array(
      'menu'    => 'dropdown', 
      'theme_location' => 'menu-6', 
      'depth'    => 2, 
      'container'   => 'div', 
      'container_class' => 'collapse navbar-collapse', 
      'container_id'  => 'bs-example-navbar-collapse-1', 
      'menu_class'  => 'nav navbar-nav', 
      'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
      'walker'   => new wp_bootstrap_navwalker()) 
     ); 
    ?> 

Mein JavaScript-Code:

jQuery(document).ready(function() { 
    jQuery(".dropdown-menu li a").click(function(){ 
    jQuery(".dropdown-toggle").html(jQuery(this).text()+' <span class="caret"></span>'); 
    }); 

    jQuery(".dropdown-toggle").click(function(){ 
     jQuery('#blog').toggleClass('blogTranslateY'); 
    }); 

    jQuery(document).on("click", function(event){ 
    var dropdown = jQuery(".dropdown-toggle"); 
    if(dropdown !== event.target && !dropdown.has(event.target).length){ 
     jQuery('#blog').removeClass('blogTranslateY'); 
    } 
}); 

}) 

Meine CSS:

.navbar-header ul { 
    padding: 0; 
    margin-top: 0; 
} 
.navbar-header li{ 
    list-style: none; 
    height: 40px; 
    line-height: 39px; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #fff; 
    text-align: center; 
} 
.dropdown-menu { 
    display: none; 
} 
.dropdown-toggle::after { 
    content: ''; 
    background-image: url(img/arrow.png); 
    width: 15px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    height: 9px; 
    position: absolute; 
    right: 2%; 
    top: 50%; 
    margin-top: -4px; 
    transition-duration: 0.4s; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

.dropup, 
.dropdown { 
    position: relative; 
} 
.navbar-nav { 
    padding: 0; 
} 
.bs-example-navbar-collapse-1 { 
    overflow: hidden; 
} 
.dropdown-menu { 
    top: 100%; 
    display: block; 
    visibility: hidden; 
    float: left; 
    width: 100%; 
    z-index: 1; 
    margin-top: 1px; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    transition: all 0.5s ease-in; 
    transform: translateY(-200px); 
} 
.dropdown, a.dropdown-toggle { 
    position: relative; 
    z-index: 5; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #fff; 
} 
.dropdown-menu .divider { 
    height: 1px; 
    margin: 9px 0; 
    overflow: hidden; 
    background-color: #e5e5e5; 
} 
.dropdown-menu > li > a { 
    display: block; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333; 
    white-space: nowrap; 
    line-height: 37px; 
} 
.dropdown-toggle { 
    display: block; 
    text-decoration: none; 
} 
.navbar-header a { 
    text-decoration: none; 
} 
.navbar-header a:hover { 
    color: #209dd8; 
} 
.dropdown.open > .dropdown-toggle::after { 
    -webkit-transform:rotate(180deg); 
    transform: rotate(180deg); 
} 
.dropdown.open > .dropdown-menu { 
    transform: translateY(0); 
    visibility: visible; 
} 
.blogTranslateY { 
    transition-delay: 0s!important; 
    margin-top: 0!important; 
} 

Answer 1

gut, ich gefunden habe, Das hast du in deiner Style-Datei dem CSS nur gesagt .nav-category aktive Menüpunkte sollen Stil erhalten .. die ist nicht Ihr Drop-Down-Menü .. einfach gehen Sie zu Ihrer style.css Linie 81 und ändern Sie diese:

.nav-category .current-menu-item , .current-menu-parent { 
    background-color: #fff!important; 
} 

dazu:

.current-menu-item , .current-menu-parent { 
    background-color: #fff!important; 
}