У меня есть страница, которая переключает меню при нажатии на якорь меню. Он хорошо работает с мобильных устройств, когда размещен локально на сервере xamp, но просто отображает #, когда он находится на рабочем сервере. Тем не менее, это работает, когда я изменяю размер окна рабочего стола, но не на моем мобильном телефоне. Вот моя ссылка для переключения меню
<div class="menu-toggle">
<a href="#">
<i class="fa fa-bars"></i>
<span>Menu</span>
</a>
</div>
А вот мой js код
$('.menu-toggle > a').on('click', function (e) {
e.preventDefault();
$('#responsive-nav').toggleClass('active');
})
Мой CSS код
.header-ctn .menu-toggle {
display: none;
}
@media only screen and (max-width: 991px) {
.header-ctn .menu-toggle {
display: inline-block;
}
#responsive-nav {
position: fixed;
left: 0;
top: 0;
background: #15161D;
height: 100vh;
max-width: 250px;
width: 0%;
overflow: hidden;
z-index: 22;
padding-top: 60px;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
#responsive-nav.active {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
width: 100%;
}
I включены как мой локальный файл js, так и файл jquery из CDN