Area not clickable after using ::before-CodePudding

I'm trying to imitate a design where I have to add a pattern over the linear gradient. I've used ::before element to do that.

But now the hamburger icon and links are not working. When I inspect the site on the mobile viewport, it shows that body covers the whole area. I have tried messing with the z-index and pointer events but failed to meet the expectation. Is there any way to fix this?

const menuBtn = document.querySelector('.hamburger');

menuBtn.addEventListener('click',()=>{
    menuBtn.parentElement.classList.toggle('open');
    console.log('button clicked')
});

body{
    min-height: 100vh;
    font-size: 1rem;
    text-align: center;
    z-index: 0;
}
header{
    min-height: 85vh;
    background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
    border-bottom-left-radius: 6rem;
    padding: 3rem 1.5rem;
    position: relative;
    overflow: hidden;
    z-index: -2;
}
header::before{
    position: absolute;
    content: '';
    top: 5rem;
    left: 8rem;
    width: 100%;
    height: 100%;
    background: url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg) no-repeat;
    background-size: 100% 100%;
    transform: scale(3);
    z-index: -1;
}
header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .logo{
    max-width: 80px;
}
nav .nav-links,nav .login-section{
    display: none;
}
nav .menu{
    width: 2rem;
    display: flex;
    align-items: center;
    cursor:pointer;
}
.menu .hamburger{
    max-width:40px;
    cursor:pointer;
}
header .text-content{
    max-width: 300px;
    margin: 0 auto;
}

<header>
  <nav>
      <img src="https://cutt.ly/5K0WfPK" alt="Home" >
      <div >
        <img src="https://cutt.ly/TK0EzcH" >
      </div>
   </nav>
   <div >
      <h1>A header is here</h1>
      <p>lorem10</p>
      <div >
        <a href="www.google.com">Some links</a>
        <a href="www.youtube.com">Some links</a>
      </div>
   </div>
 </header>

CodePudding user response：

You've set property z-index: -3; to header and z-index: -1; to it's pseudo element ::before. It is clear that header has smaller z-index than it's pseudo element.

So ::before has greater stack order than that of header. Due to that reason ::before is in the front of header which has lower stack order than it's pesudo element.

const menuBtn = document.querySelector('.hamburger');

menuBtn.addEventListener('click',()=>{
    menuBtn.parentElement.classList.toggle('open');
    console.log('button clicked')
});

body{
    min-height: 100vh;
    font-size: 1rem;
    text-align: center;
    z-index: 0;
}
header{
    min-height: 85vh;
    background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
    border-bottom-left-radius: 6rem;
    padding: 3rem 1.5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
header::before{
    position: absolute;
    content: '';
    top: 5rem;
    left: 8rem;
    width: 100%;
    height: 100%;
    background: url("https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg") no-repeat;
    background-size: 100% 100%;
    transform: scale(3);
    z-index: -1;
}
header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .logo{
    max-width: 80px;
}
nav .nav-links,nav .login-section{
    display: none;
}
nav .menu{
    width: 2rem;
    display: flex;
    align-items: center;
    cursor:pointer;
}
.menu .hamburger{
    max-width:40px;
    cursor:pointer;
}
header .text-content{
    max-width: 300px;
    margin: 0 auto;
}

<header>
  <nav>
      <img src="https://cutt.ly/5K0WfPK" alt="Home" >
      <div >
        <img src="https://cutt.ly/TK0EzcH" >
      </div>
   </nav>
   <div >
      <h1>A header is here</h1>
      <p>lorem10</p>
      <div >
        <a href="www.google.com">Some links</a>
        <a href="www.youtube.com">Some links</a>
      </div>
   </div>
 </header>

CodePudding user response：

Be careful when using position: relative/absolute they are not in the normal flow so their behavior is "ghost-like". In the example:

the position properties are removed
the pseudo-element header::before is removed
the background properties of header::before has been merged with the background properties in header

  background-image: 
  /* Top */
  url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg), 
  /* Bottom */
  linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%)); 
  background-repeat: no-repeat, repeat;
  background-size: 150% 150%, cover;

Note, the shorthand background property isn't used here. Each value is separated by a comma. See this article for details

const menuBtn = document.querySelector('.hamburger');

menuBtn.addEventListener('click', () => {
  menuBtn.parentElement.classList.toggle('open');
  console.log('button clicked')
});

body {
  min-height: 100vh;
  font-size: 1rem;
  text-align: center;
}

header {
  min-height: 85vh;
  background-image: 
  url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg),
  linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
  background-repeat: no-repeat, repeat;
  background-size: 150% 150%, cover;
  border-bottom-left-radius: 6rem;
  padding: 3rem 1.5rem;
  overflow: hidden;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav .logo {
  max-width: 80px;
}

nav .nav-links,
nav .login-section {
  display: none;
}

nav .menu {
  width: 2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu .hamburger {
  max-width: 40px;
  cursor: pointer;
}

header .text-content {
  max-width: 300px;
  margin: 0 auto;
}

<header>
  <nav>
    <img src="https://cutt.ly/5K0WfPK" alt="Home" >
    <div >
      <img src="https://cutt.ly/TK0EzcH" >
    </div>
  </nav>
  <div >
    <h1>A header is here</h1>
    <p>lorem10</p>
    <div >
      <a href="www.google.com">Some links</a>
      <a href="www.youtube.com">Some links</a>
    </div>
  </div>
</header>