How can i change mobile menu one scroll to multiple pages? - html

Question

I have one page scroll menu,but i've changed that in multiple page.These kind of menu is working on desktop,but is not working on mobile version.How can I change code css or html because in mobile version when i click on menu and close it anywhere i clicked redirectg me to another page.
.mobile-menu {
display: block;
width: 18%;
right: -20%;
height: 100%;
background: rgba(1, 16, 25, 0.67);
position: fixed;
z-index: 9998;
transition: 0.6s ease;
top: 0;
opacity: 0;
}
.mobile-menu ul {
position: relative;
top: 20%;
padding: 0;
}
.mobile-menu ul li {
list-style: none;
margin-bottom: 2em;
display: block;
}
.mobile-menu ul li a {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1em;
font-weight: bold;
overflow: hidden;
position: relative;
padding: 1em 0;
text-transform: uppercase;
letter-spacing: 3px;
}
.open > ul.dropdown-menu.agile_short_dropdown{
display: block;
transform: none !important;
min-width: 65%;
border: none;
box-shadow: none;
border-radius: 0;
left: 18%;
}
.open > ul.dropdown-menu.agile_short_dropdown li{
margin:0 !important;
}
ul.dropdown-menu.agile_short_dropdown > li > a:hover{
background: none;
}
.mobile-menu ul li a:after {
content: '';
background: #191143;
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
z-index: -1;
transition: 0.4s ease;
}
.mobile-menu ul li a:hover,.mobile-menu ul li.active a {
color: #fff;
}
.mobile-menu ul li a:hover:after,.mobile-menu ul li.active a:after {
right: 0;
}
li.dropdown.act a.w3_icons_act {
background: #0e0e0e;
color: #fff;
}
.mobile-menu img {
position: absolute;
width: 150px;
display: block;
left: 50%;
top: 3rem;
transform: translatex(-50%);
-webkit-transform: translatex(-50%);
-moz-transform: translatex(-50%);
-o-transform: translatex(-50%);
-ms-transform: translatex(-50%);
padding: 0;
text-align: center;
}
.mobile-menu--open {
opacity: 1;
right:0%;
}
.dropdown.active.open a ul.dropdown-menu.agile_short_dropdown li a.w3_icon_1:after{
background:none !important;
<div class="center-container">
<div class="w3_agile_header">
<div class="w3_menu">
<div class="agileits_w3layouts_banner_info">
</div>
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><a href="https://ioanasandu.ro/online/web/index.html" class="hover" >Despre mine</a></li>
<li>Repertoriu</li>
<li>Discografie</li>
<li>Evenimente</li>
<li>Foto</li>
<li>Video</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div>
Can anyone help me?