CSS: Hide box-shadow only when div is getting overflowed-CodePudding

I have a navigation bar with a box shadow. My navigation bar is visible on every page of my website. However, on my Home page, I have a hero section overflowing the Navigation bar. I want the box shadow to disappear there.

Navigation bar on the home page

Navigation bar everywhere else

I tried to give a higher z-index to the content of the Navigation bar but it did not work. If someone could help me out I would be very grateful.

Part of the code for my navigation bar:

header {
    background-color: transparent;
    padding: 0 25px;
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    .link {
        font-weight: 500;
        font-size: 14px;
        padding: 0 2px;
        transition: 0.3s color ease;
        z-index: 110;
        &:hover {
            color: #1eb8b8;
        }
    }
}

Part of the code for my hero section:

.hero-section {
  z-index: 100;
  display: flex;
  justify-content: center;
  background-image: url(../assets/hero.jpg);
  margin-top: -145px;
  height: 115vh;
  width: 100%; 
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  align-items: center;
}

Thank you very much in advance!

Edit: The hero section and the navigation bar are in 2 different files This is the HTML part of the code for the Navigation bar:

<header>
    <nav >
        <div >
            <ul v-show="!mobile">
                <router-link  :to="{name: 'Home'}">Home</router-link>
                <router-link  :to="{name: 'Prints'}">Prints</router-link>
                <router-link  :to="{name: 'Blogs'}">Blogs</router-link>

The links are below the header section so I think that is why the z-index method is not working

For the hero section:

<div >
    <div >
      <h2>Welcome to my website!</h2>
    </div>

CodePudding user response：

For z-index to take effect you'll need to apply a position to the elements you want to give a z-index, like so:

.link {
  position: relative;
  z-index: 110;
}

In short, "z-index" only applies to positioned elements. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

CodePudding user response：

If your header is the Navigation bar Do increase the z index of that element. The higher your z index value is, your element appears on top of stack. Learn more here > https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

Edit: position is very important as suggested by @Joe Spurling