I am facing a challenge with my current website project. It seems that the navigation trigger button (the burger icon on the top left corner of the page) is only responsive when the page is at the very top. As soon as I scroll down even slightly, it stops responding to clicks. Despite thoroughly checking my code, I can't seem to find the issue. Perhaps a fresh set of eyes could spot something I might have missed.
function closeSideBar() {
document.getElementById('mysidebar').style.width='0px';
document.getElementById('navigation').style.marginLeft='0px';
document.getElementById('content').style.transform="translateX(0px)";
}
function openSideBar(){
document.getElementById('mysidebar').style.width='190px';
document.getElementById('navigation').style.marginLeft='190px';
document.getElementById('content').style.transform="translateX(190px)";
}
function sideBar() {
if(document.getElementById('mysidebar').style.width==="190px"){
closeSideBar();
}
else{
openSideBar();
}
}
const maino = document.getElementById('container');
maino.addEventListener('click', function () {
if (document.getElementById('mysidebar').style.width==="190px") {
closeSideBar();
}
});
$(document).ready(function(){
$("#jumboref1").hover(function(){
$("#smallref1").css("color", "#E7AD9C");
}, function(){
$("#smallref1").css("color", "#efefef");
});
// Remaining jQuery code omitted for brevity
});@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 200;
}
// CSS styling rules omitted for brevity
<html lang="en">
<head>
<meta charset="UTF-8>"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
// HTML structure and elements omitted for brevity
</body>
</html>