How to create responsive wordpress menu?

I am creating responsive menu in wordpress but I am not done. Please assist me

jQuery(‘.navbar-toggle’).on(‘click’, function() {
var elem = $(this),
item = $(‘.menu-item’),
active = ‘is-active’,
play = ‘menu-item–play’;
if ( elem.hasClass(active) ) {
elem.removeClass(active);
$(item.get().reverse()).each(function(i) {
var row = $(this);
setTimeout(function() {
row.removeClass(play);
}, 50*i);
});
}
else {
elem.addClass(active);
item.each(function(i) {
var row = $(this);
setTimeout(function() {
row.addClass(play);
}, 50*i);
});
}
});
});

CSS is :- .navbar-toggle{margin: -35px auto;display:block;}
.menu-item {display: block;float: none;-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
transition: all .3s ease-out;
}
.menu-item–play {
display: block !important;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
#menu-main-menu{float: none;display:block;}
.menu-item + .menu-item {border-top: 1px solid #008ae6;}

Read more here:: How to create responsive wordpress menu?

Leave a Reply

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