Tengo una barra de navegación con una sombra de cuadro. Mi barra de navegación es visible en todas las páginas de mi sitio web. Sin embargo, en mi página de inicio, tengo una sección de héroe que desborda la barra de navegación. Quiero que la sombra del cuadro desaparezca allí.

Barra de navegación en la página de inicio

Barra de navegación en cualquier otro lugar

Traté de dar un índice z más alto al contenido de la barra de navegación, pero no funcionó. Si alguien pudiera ayudarme le estaría muy agradecido.

Parte del código de mi barra de navegación:

 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; } } }

Parte del código para la sección de mi héroe:

 .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; }

¡Muchas gracias por adelantado!

Editar: la sección de héroe y la barra de navegación están en 2 archivos diferentes. Esta es la parte HTML del código para la barra de navegación:

 <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>

Los enlaces están debajo de la sección del encabezado, así que creo que es por eso que el método del índice z no funciona

Para la sección de héroe:

 <div class="home"> <div class="hero-section"> <h2>Welcome to my website!</h2> </div>