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

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 class=”container”>
<div class=”nav-links”>
<ul v-show=”!mobile”>
<router-link class=”link” :to=”{name: ‘Home’}”>Home</router-link>
<router-link class=”link” :to=”{name: ‘Prints’}”>Prints</router-link>
<router-link class=”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 class=”home”>
<div class=”hero-section”>
<h2>Welcome to my website!</h2>
</div>