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" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
<a href="www.google.com">Some links</a>
<a href="www.youtube.com">Some links</a>
</div>
</div>
</header>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" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
<a href="www.google.com">Some links</a>
<a href="www.youtube.com">Some links</a>
</div>
</div>
</header>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" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
<a href="www.google.com">Some links</a>
<a href="www.youtube.com">Some links</a>
</div>
</div>
</header>