OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Hamburger menu come under the div when I open?

  • Thread starter Thread starter Yasaman Forouzesh
  • Start date Start date
Y

Yasaman Forouzesh

Guest
I wanted to write web app that is capable in all device so I design nav bar for full screen and I wanted to design hamburger menu for small device but just my skill page has this problem. When I open the menu, menu will go under the div and rest of the link on menu can't be click. Here is my app link https://yasamanforouzesh.herokuapp.com/

Code:
     .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>

Here is the picture

<p>I wanted to write web app that is capable in all device so I design nav bar for full screen and I wanted to design hamburger menu for small device but just my skill page has this problem. When I open the menu, menu will go under the div and rest of the link on menu can't be click. Here is my app link <a href="https://yasamanforouzesh.herokuapp.com/" rel="nofollow noreferrer">https://yasamanforouzesh.herokuapp.com/</a></p>
<pre><code> .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>
</code></pre>
<p><a href="https://i.sstatic.net/hed0w.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/hed0w.jpg" alt="Here is the picture" /></a></p>
 
Top