I have created an HTML page with a menu and content section. Everything is working perfectly on desktop, however, I am facing an issue on mobile devices. When the menu is clicked on mobile, the body content overlaps with the menu items while scrolling (the content scrolls along with the menu).
I tried using `overflow: hidden` and `position: fixed`, but it resulted in making the entire page non-scrollable even when the menu button is not clicked.
Could someone kindly assist me with this matter?
Here are the steps I have taken:
In my JS file:
$(document).ready(function () {
$("#mobile-toggle").click(function () {
$('body').css('overflow', 'hidden');
});
});
My mobile toggle button code:
<button id="mobile-toggle" class="mobile-toggle">
_('mobile-toggle')<span></span>
</button>
Although the button disables scrolling upon click, it does not work as intended on mobile devices.