I'm having trouble displaying the selected item in a bootstrap dropdown menu on WordPress. You can check out my site at . Ideally, it should function similar to this example: http://www.bootply.com/62811 https://i.sstatic.net/5d5FH.png
Here is my menu 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())
);
?>
My 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');
}
});
})
My 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;
}