I had a vision to create a web app that would be fully functional on all devices, so I designed a navigation bar for full-screen display and a hamburger menu for smaller screens. However, I encountered a problem with my skills page. When I open the menu, it goes under the div and the rest of the links in the menu become unclickable. You can check out my app at this link:
.nav-container {
width: 100vw;
height: 80px;
}
.Hnavbar {
align-items: center;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.navbar-logo {
display: block;
margin: 0;
justify-self: start;
float: left;
width: 65px;
height: 75px;
}
.nav-menu {
margin: 0;
width: 100%;
position: absolute;
top: 70px;
left: -100%;
opacity: 0;
transition: all 0.5s ease;
text-align: center;
justify-self: end;
background-color: red;
height: 57vh;
z-index: 3;
}
.nav-links {
color: white;
text-decoration: none;
text-align: center;
line-height: 10px;
width: 100%;
display: table;
}
.nav-menu.active {
background-color: black;
left: 0;
opacity: 1;
transition: all 0.5s ease;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
cursor: pointer;
display: block;
}
.menu-toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
display: block;
transition: all 0.3s ease-in-out;
background: white;
}
<div className="nav-container">
<nav className="Hnavbar">
<img className="navbar-logo" src="/yasi1.jpg"/>
<div className={`menu-toggle ${isactive}`}id="mobile-menu" onClick={checkClass}>
<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>
<ul className={`nav-menu ${active}`}>
<li className="list"><a href="/" className="nav-links">Home</a></li>
<li className="list"><a href="/about" className="nav-links">About</a></li>
<li className="list"><a href="/skills" className="nav-links">Skills</a></li>
<li className="list"><a href="/projects" className="nav-links">Projects</a></li>
<li className="list"><a href="/contact" className="nav-links">Contact</a></li>
</ul>
</nav>
</div>