I'm currently facing a challenge with my responsive menu. It works perfectly on my offline server in mobile format, but as soon as I upload it to the real server, it stops working. I've been grappling with this problem for hours. Here's the snippet of code causing the issue:
HTML
<div class="menu">
<div class="menu_bar">
<img id="logo-mobile" src="design/logo-titol-prova-1.PNG">
<a href="#" class="bt-menu"><span class="icon-menu"></span></a>
</div>
<nav>
<img id="logo" src="design/logo-titol-prova-1.PNG">
<ul>
<li class="first"><a href="about">About</a></li>
<li><a href="surf-salina-cruz">Surf/Kitesurf</a></li>
<li><a href="mexico-surf-tour">The Tour</a></li>
<li><a href="surf-camp-lodging">Lodging</a></li>
<li><a href="testimonials">Testimonials</a></li>
<li><a href="book-now">Reserve Now</a></li>
</ul>
</nav>
</div>
CSS
... (CSS code remains unchanged) ...menu.js
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
script-menu.js
... (JavaScript code remains unchanged) ...This is the website: . I have exhausted all my options and spent countless hours troubleshooting. If you have any insights on how to resolve this issue, your help would be greatly appreciated. Thank you!