I have a responsive Navbar with hamburger for mobile (in React) and when it expands from off screen it floats under my form element as opposed to overlaying the whole screen. The transition and styling is all perfect. I have tried z-index and changing position settings and cant get this to work at all.
Nav
nav {
display: flex;
justify-content: space-around;
}
media -
.nav {
z-index: 1000;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #5D4994;
transform: translateX(100%);
transition: transform 0.3s ease-in;
}
.nav-links-toggle {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1000;
}
jsx
<nav className = {toggle ? 'nav-active' : ''}>
<div className = "logo">
<img src = {logo} alt = 'logo' className='logo-pic' />
<p>HearthStone Deck Creator</p>
</div>
<ul className = {toggle ? 'nav-links-toggle' : 'nav-links'} id = "nav">
<li><Link to ='/'>Home</Link></li>
<li><Link to ='/deckbuilder'>DeckBuilder</Link></li>
<li><Link to ='/contact'>Contact</Link></li>
<li><Link to ='/about'>About</Link></li>
</ul>
<div className={toggle ? 'toggle burger' : 'burger'} id = "burger" onClick = {handleClick}>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
</nav>
form css
.input-search {
width: 60vw;
height: 6vh;
border-radius: 10px;
font-size: 1.5rem;
transition: all 0.30s ease-in-out;
outline: none;
margin-bottom: 1.8rem;
padding: 3px 0px 3px 3px;
border: 1px solid #DDDDDD;
}
[1]: https://i.stack.imgur.com/qTmeJ.png
[2]: https://i.stack.imgur.com/GvVY7.png
question from:
https://stackoverflow.com/questions/65902710/how-to-prevent-navbar-going-under-elements-on-mobile 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…