Here is the Javascript code I'm currently using to control the mobile menu functionality on my website. It prevents content outside of the menu from scrolling when the mobile menu is open and closes the menu when an item inside it is clicked.
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', closeHamp, false);
}
I am looking for a way to restrict this code to run only on specific screen sizes. I attempted to use the following Javascript to achieve that but encountered issues in getting it to work properly.
function execute(){
if(screen.width <= 768) {
}
If you have any suggestions on how I could modify this code to target a particular screen size effectively, please feel free to share your insights with me.
Check out My Website