Why is my hamburger menu hidden behind my container? - css

Question

Why does my menu stay hidden behind my main container and can only been seen through scrolling?
I've tried things like increasing the z-index and changing the positioning type, but it only seems to work when I increase the min-height of nav-container.
I've tried to increase the height of the nav-container with onClick event listeners and React hooks, but I'm not sure if it's the right way to go.
How could I overcome this?
Here is my CSS code:
.container {
max-width: 1050px;
width: 90%;
margin: auto;
outline: 3px solid red;
background-color: wheat;
z-index: 30;
min-height: 100vh;
}
.navContainer {
display: block;
position: relative;
height: 60px;
}
<div style={{ minHeight: hover ? '100vh' : 'auto'}}
ref={containerRef} className={`${HamburgerCSS.container} ${HamburgerCSS.navContainer}` }>
<input ref={inputRef} onChange={checkedOrNot} className={HamburgerCSS.checkbox} type="checkbox" name="" id="" />
<div className={HamburgerCSS.hamburgerLines}>
<span onClick={handleClick} className={`${HamburgerCSS.line} ${HamburgerCSS.line1}`} />
<span className={`${HamburgerCSS.line} ${HamburgerCSS.line2}`} />
<span className={`${HamburgerCSS.line} ${HamburgerCSS.line3}`} />
</div>
<div className={HamburgerCSS.logo}>
<h1>Navbar</h1>
</div>
<div className={HamburgerCSS.menuItems}>
<li>Home</li>
<li>about</li>
<li>blogs</li>
<li>portfolio</li>
<li>contact</li>
</div>
</div>