On the page I'm working on, the sidenav turns into a menu when on smaller screens. are replaced by javascript. It works perfectly fine on desktop, but when I tested it on mobile, the options don't open up any links. Just in case it is necessary, I'm using chrome on desktop and iOS safari on mobile.
I'm also a noob on everything javascript related :')
Here's the codepen if it doesn't work properly: https://codepen.io/linszhz/pen/wveyGvQ
document.getElementById('SelectOption').addEventListener('change', function () {
val = $("#SelectOption").val();
console.log(val)
if (val === '#About') { window.open('https://www.google.com', '_blank');
}
if (val === '#News') {window.open('https://www.google.com', '_blank');
}
if (val === '#Track') { window.open('https://www.google.com', '_blank');
}
if (val === '#Shipping') {window.open('https://www.google.com', '_blank');
}
if (val === '#Refund') { window.open('https://www.google.com', '_blank');
}
if (val === '#Terms') {window.open('https://www.google.com', '_blank');
}
if (val === '#Privacy') {window.open('https://www.google.com', '_blank');
}
if (val === '#Contact') {window.open('https://www.google.com', '_blank');
}
});select {
text-align: center;
text-align-last: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
}
option {
text-align: center;
text-align-last: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
}
.subMenuSelect {
border: 2px solid black;
margin: 0 auto;
margin-top: 1rem;
padding: 5px;
text-align: center;
background: rgb(255, 255, 255);
height: 50px;
justify-content: center;
align-items: center;
font-weight: bold;
display: block;
font-size: 1.5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="./script.js"></script>
<title>Document</title>
</head>
<body>
<div>
<select class="subMenuSelect form-control d-block d-lg-none mb-2" aria-label="Sidebar page navigation" id='SelectOption'>
<option value="">FAQ</option>
<option value="#About">About us</option>
<option value="#News">News</option>
<option value="#Track">Track your order</option>
<option value="#Shipping">Shipping & Handling</option>
<option value="#Refund">Refund & Return</option>
<option value="#Terms">Terms of Service</option>
<option value="#Privacy">Privacy Policy</option>
<option value="#Contact">Contact us</option>
</select>
</div>
</body>
</html>
