The screenshot of the error The menu links in the mobile view aren't visible but clickable. As a novice in HTML and CSS, I'm facing an issue where the hamburger menu with z-index 1 is displayed correctly, but its content is not visible. This problem occurs only in the mobile view. Also, I have checked the media query code in the CSS file, and the stylesheet name is correctly set. Any insights on how to resolve this issue would be greatly appreciated.
HTML code
<!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" />
<title>Executive Committee</title>
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style2.css" rel="stylesheet">
<style>
.our-team{
padding: 30px 0 40px;
background: #fff;
overflow: hidden;
position: relative;
}
.our-team .pic{
width: 130px;
height: 130px;
margin-bottom: 50px;
position: relative;
z-index: 1;
margin: auto;
}
// CSS styles truncated for brevity
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="images/TMxAU.png" alt="">
</div>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
// Menu items truncated for brevity
</ul>
</nav>
<section class="landing">
<div>Alone we can do so little, together we can do so much.</div>
</section>
// Further HTML code truncated for brevity
</body>
<footer id="footer">
// Footer section content truncated for brevity
</footer>
</html>
CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
// CSS styles truncated for brevity