Why is my hamburger menu hidden behind my container?

Issue

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><a href="#">Home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">blogs</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">contact</a></li>
    </div>
</div>

Solution

This is most likely happening because you are either using a third party library for you hamburger menu or you are using absolute positioning for you hamburger menu or it's container. You might want to checkout this article on absolute positioning and you also might want to read this [1]: Position:absolute element being hidden behind later elements

Answered By - laegecan