I have implemented a mobile menu option that appears when you click on the triple line logo, but unfortunately, users can still scroll while the menu is open. I've tried using position:fixed; but haven't been successful in preventing scrolling behavior. Please let me know if you have any suggestions on how to fix this issue or if there is an alternative approach. Thank you
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
} #md1{
width:100%;
height:63px;
background-color: rgb(84, 104, 217);
top:0;
position:absolute;
}
body {
font-family: 'Lato', sans-serif;
}
.bars{
color:white;
}
.overlay {
height: 100%;
position: fixed; /*Changed 'fixed' for correct syntax */
width: 0;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(84, 104, 217);
overflow-x: hidden;
transition: 0.5s;
}
.fixedPosition
{
position: fixed;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color:white;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: white;
display: block;
transition: 0.3s;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.footer {
position: relative;
background-color: rgb(84, 104, 217);
height: 80px;
top: 546px;
color: white;
overflow: hidden;
}
.footwords {
padding-top: 32px;
font-family: 'playfair_displayregular';
position: relative;
left: 6%;
}
.dtp {
display:none;
}
.leftimage {
position: absolute;
object-fit: cover;
width: 95%;
height: 365px;
top: 67px;
float:left;
left:2.5%;
}
}<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="CSS/styleindex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='Javascript/index.js'></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168595753-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-168595753-1');
</script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Rom Fradkin
</title>
<link rel="shortcut icon" type='image/png' href="Images/favicon.png">
</head>
<body>
<header class="topnav" id="topnav">
<div class='dtp'>
<a class="active-menu" href="index.html">Home</a>
<a class="link" href="Pages/academics.html">Academics</a>
<a class="link" href="Pages/projects.html">Projects</a>
<a class="link" href="Pages/communityservice.html">Community Service</a>
</div>
<div id='md1'>
<div class='md'>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<span class='bars' style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
</div>
</div>
</header>
<div class='section1'>
<img class= 'leftimage' src="Images/frontback.jpg" alt="Missing File">
<div class='HelloIm'>Hello, I'm</div>>
<div class='romf'>Rin.</div>>
</div>
<div class='bio'>
<img class = 'rndface' src="Images/rndface.png" alt="Missing File">
<h1 class='topname'>
Rkin
</h1>
<p class='school'>
Nechool
</p>
<p class='interests'>
Encience
</p>
<p class='location'>
Chicnois
</p>
<p class='mail'>
fril.com
</p>
<p class='num'>
(8
</p>
<p>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagkin/" class="fa fa-instagram"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/inin-a3a9541a5/" class="fa fa-linkedin"></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.in" class="fa fa-github"></a>
</p>
<p>
</div>
</body>
</html>