Помогите разобраться. Мобильное меню до натягивания на Вордпресс работало хорошо. Но после натягивания, оно перестало работать. Не могу понять в чем может быть проблема?. Вот код:
<div class="col-lg-9">
<nav class="navbar navbar-expand-lg navbar-light main-menu-nav">
<button class="navbar-toggler" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarSupportedContent">
<button class="offcanvas-close" type="button" data-toggle="offcanvas-close">
×
</button>
<div class="navbar-nav mr-auto">
<?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>
</div>
</div>
</nav>
</div>
<script>
$(function () {
'use strict';
$('[data-toggle="offcanvas"]').on('click', function () {
$('.offcanvas-collapse').addClass('open');
$('body').addClass('offcanvas-open');
})
$('[data-toggle="offcanvas-close"]').on('click', function () {
$('.offcanvas-collapse').removeClass('open');
$('body').removeClass('offcanvas-open');
})
})
</script>
.offcanvas-collapse {
position: fixed;
top: 0;
bottom: 0;
left: -300px;
width: 200px;
height: 100%;
padding-top: 3rem;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #fff;
transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
.offcanvas-close {
display: block;
position: absolute;
font-size: 2.5rem;
font-weight: 700;
cursor: pointer;
border: none;
-webkit-appearance: button;
background-color: transparent;
right: 0;
top: 0;
padding: 0 1.5rem;
color:#eaeaea;
}
.offcanvas-open {
overflow: hidden;
}