WordPress Responsive Menu Not Dropping Down

I’ve been trying to get my WordPress responsive menu to toggle when a button is clicked, however, once the button is clicked, the menu slides down and then back up right awaY. I can’t figure out where I’ve gone wrong. Any help would be greatly appreciated.

Below is the code I am using:

HTML

<nav id=”third-menu” class=”mobile-menu” role=”navigation”>
<button class=”menu-toggle”>Menu</button>
<?php wp_nav_menu( array(
‘theme_location’ => ‘third-menu’,
‘menu_class’ => ‘third-menu’,
‘menu_id’ => ‘third-menu-nav’ ) ); ?>
</nav>

CSS

@media screen and (max-width: 800px) {

.menu-toggle, .mobile-menu{
display: block;
}

.first-menu-nav, .second-menu-nav{
display: none;
}

.mobile-menu ul.third-menu-nav,
.mobile-menu div.third-menu-nav > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}

.mobile-menu ul {
margin: 0;
text-indent: 0;
}

.mobile-menu li a,
.mobile-menu li {
display:block;
text-decoration: none;
text-align: center;
margin: 0;
}

.mobile-menu li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
white-space: nowrap;
}

.mobile-menu li a:hover,
.mobile-menu li a:focus {
color: #000;
}

.mobile-menu ul.third-menu-nav,
.mobile-menu div.nav-menu > ul {
display: none;
}

.mobile-menu li ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

.mobile-menu li ul ul {
top: 0;
left: 100%;
}

.mobile-menu ul li:hover > ul,
.mobile-menu ul li:focus > ul,
.mobile-menu .focus > ul {
border-left: 0;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}

.mobile-menu li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}

.mobile-menu li ul li a:hover,
.mobile-menu li ul li a:focus {
background: #e3e3e3;
color: #444;
}

.mobile-menu .current-menu-item > a,
.mobile-menu .current-menu-ancestor > a,
.mobile-menu .current_page_item > a,
.mobile-menu .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}

.menu-toggle .toggled-on{
display: block;
}

}

JS

jQuery(document).ready(function( $ ) {

$(‘.third-menu-nav’).hide();

$(‘.menu-toggle’).click(function() {
$(‘.third-menu-nav’).slideToggle(“slow”, function() {
// Animation complete.
});

})

})

Read more here:: WordPress Responsive Menu Not Dropping Down

Leave a Reply

Your email address will not be published. Required fields are marked *