Why my navbar is acting like transparent when I hover over the cards?-CodePudding

Here is the codepen I am gonna refer to throughout the question: https://codepen.io/zarif-codes/pen/OJOBmLV

I am making a product landing page (an FCC project). For that, I have made the navbar fixed. Here is the navbar html.

<header id="header">
<div id="center">
  <div id="brand-id">
    <img src="https://cdn-icons-png.flaticon.com/512/776/776588.png" alt="truck icon" id="header-img">
    <p>FastDel</p>
  </div>

  <nav id="nav-bar">
    <a href="#features" >Features</a>
    <a href="#pricing" >Pricing</a>
    <a href="#how-to" >How it works</a>
  </nav>
</div>

Here is the navbar css

#header {
  box-shadow: 0px 3px 10px;
  background: rgb(0,9,36);
  background: linear-gradient(
    90deg, 
    rgba(0,9,36,1) 0%, 
    rgba(9,121,107,1) 62%, 
    rgba(0,91,255,1) 100%);
  position: fixed;
  top: 0;
  width: 100vw;
}

If you scroll a bit, you will see a 'Features' section in my webpage. It has 3 cards, which have some hover effects. Here are the css for these cards:

#features {
  display: flex;
  justify-content: space-around;
}

.feature {
  width: 28vw;
  border-radius: 1rem;
  box-shadow: 2.5px 5px 10px 0.1px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  font-size: 1.25vw;
}

.feature p{
  grid-column-start: 1;
  grid-column-end: 3;
}

.feature img {
  width: 6vw;
}

.feature:hover{
  animation-name: scale-big;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

The problem is whenever I scroll down and my navbar is over the cards, by hovering over them, I can see the text of the cards through my navbar. My navbar kinda acts like a transparent navbar. How can I solve it?

CodePudding user response：

This is an z-index problem. This can be resolved by adding higher z-index value to #header The below code may solve your problem.

#header {
    z-index: 999;
}

CodePudding user response：

Add z-index to your Header it will be fix.

 #header {
  z-index:10000;
 }