2

Quiero que cuando el nav aparezca con la animación que tengo de arriba a abajo el nav o menu este por encima del header, titulo..etc como que aparezca justo cuando termina el header para que la animation de slide arriba abajo se vea mejor y no se superponga con el header

document.querySelector(".bars__menu").addEventListener("click", animateBars);

let line1__bars = document.querySelector(".line1__bars-menu");
let line2__bars = document.querySelector(".line2__bars-menu");
let line3__bars = document.querySelector(".line3__bars-menu");
let list_nav = document.querySelector(".lista_navegacion");

function animateBars () {
   line1__bars.classList.toggle("activeLine1__bars-menu");
   line2__bars.classList.toggle("activeLine2__bars-menu");
   line3__bars.classList.toggle("activeLine3__bars-menu");
   list_nav.classList.toggle("activeNav");
}
header {
    height: 68px;
    display: inline-block;
    width: 100%;
    background: #ffffff;
    border: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 20 !important;
  }
  header .oxygen-title {
    margin: 0 2rem;
    display: inline-block;
  }
  header .oxygen-title h1 {
    font-family: "Raleway", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    color: #08a6e4;
  }
  header .bars__menu {
    display: inline-block;
    position: relative;
    right: 0px;
    margin-left: auto;
    margin-right: 0px;
    cursor: pointer;
  }
  header .bars__menu span {
    display: block;
    width: 30px;
    height: 2px;
    background: #08a6e4;
    margin-top: 6px;
    transform-origin: 0px 100%;
    transition: all 0.3s;
  }
  nav {
    width: 100%;
    margin-top: -500px;
    transition: visibility 1s, opacity 1s, margin-top 1s linear;
  }
  nav ul {
    z-index: 5;
    padding: 3rem 0;
    width: 100%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    margin-right: auto;
    text-align: left;
    list-style: none;
    background: white;
    font-family: "Open Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3.28px;
  }
  nav ul li {
    z-index: 5;
    color: #a5a5a5;
    margin-left: 2rem;
    line-height: 3;
    cursor: pointer;
  }
  nav ul li:hover {
    color: black;
  }
  .activeLine1__bars-menu {
    transform: rotate(45deg) translate(-2px, 1px);
  }
  .activeLine2__bars-menu {
    opacity: 0;
    margin-left: 30px;
  }
  .activeLine3__bars-menu {
    transform: rotate(-45deg) translate(-4px, 2px);
  }
  .activeNav {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
  }
<header>
            <div class="oxygen-title">
                <h1>OXYGENShop</h1>
            </div><div class="bars__menu">
                <span class="line1__bars-menu"></span>
                <span class="line2__bars-menu"></span>
                <span class="line3__bars-menu"></span>
            </div>
            
            <nav class="lista_navegacion">
                <ul>
                    <li><a href=""></a>WHY US</li>
                    <li><a href=""></a>BENEFITS</li>
                    <li><a href=""></a>PRICES</li>
                    <li><a href=""></a>CONTACT</li>
                </ul>
            </nav>
        </header>

2 respuestas 2

3

Lo que hice fue encerrar a .oxygen-title y .bars__menu dentro de un div con la clase .cabecera-general:

<div class="cabecera-general">
    <div class="oxygen-title">
        <h1>OXYGENShop</h1>
    </div>
    <div class="bars__menu">
        <span class="line1__bars-menu"></span>
        <span class="line2__bars-menu"></span>
        <span class="line3__bars-menu"></span>
    </div>
</div>

Luego, entramos a esa clase y le aplicamos las siguientes propiedades:

header .cabecera-general {
    position: relative;
    background: white; // le damos color al fondo para que no sea transparente.
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29); // le ponemos el efecto de sombra.
    z-index: 5000; // hacemos que este elemento esté encima de los demás.
}

Así la cabecera estará encima del nav que aparece al dar clic en el botón del menú y se solucionaría tu problema. Tu código resultaría así:

    document.querySelector(".bars__menu").addEventListener("click", animateBars);

    let line1__bars = document.querySelector(".line1__bars-menu");
    let line2__bars = document.querySelector(".line2__bars-menu");
    let line3__bars = document.querySelector(".line3__bars-menu");
    let list_nav = document.querySelector(".lista_navegacion");

    function animateBars() {
        line1__bars.classList.toggle("activeLine1__bars-menu");
        line2__bars.classList.toggle("activeLine2__bars-menu");
        line3__bars.classList.toggle("activeLine3__bars-menu");
        list_nav.classList.toggle("activeNav");
    }
header {
    height: 68px;
    display: inline-block;
    width: 100%;
    border: none;
    top: 0px;
    left: 0px;
    position: fixed;
}

header .cabecera-general {
    position: relative;
    background: white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    z-index: 5;
}

header .oxygen-title {
    margin: 0 2rem;
    display: inline-block;
}

header .oxygen-title h1 {
    font-family: "Raleway", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    color: #08a6e4;
}

header .bars__menu {
    display: inline-block;
    position: relative;
    right: 0px;
    margin-left: auto;
    margin-right: 0px;
    cursor: pointer;
}

header .bars__menu span {
    display: block;
    width: 30px;
    height: 2px;
    background: #08a6e4;
    margin-top: 6px;
    transform-origin: 0px 100%;
    transition: all 0.3s;
}

nav {
    width: 100%;
    margin-top: -500px;
    transition: visibility 1s, opacity 1s, margin-top 1s linear;
}

nav ul {
    padding: 3rem 0;
    width: 100%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    margin-right: auto;
    text-align: left;
    list-style: none;
    background: white;
    font-family: "Open Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3.28px;
}

nav ul li {
    color: #a5a5a5;
    margin-left: 2rem;
    line-height: 3;
    cursor: pointer;
}

nav ul li:hover {
    color: black;
}

.activeLine1__bars-menu {
    transform: rotate(45deg) translate(-2px, 1px);
}

.activeLine2__bars-menu {
    opacity: 0;
    margin-left: 30px;
}

.activeLine3__bars-menu {
    transform: rotate(-45deg) translate(-4px, 2px);
}

.activeNav {
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
</head>
<header>
    <div class="cabecera-general">
        <div class="oxygen-title">
            <h1>OXYGENShop</h1>
        </div>
        <div class="bars__menu">
            <span class="line1__bars-menu"></span>
            <span class="line2__bars-menu"></span>
            <span class="line3__bars-menu"></span>
        </div>
    </div>
    
    <nav class="lista_navegacion">
        <ul>
            <li><a href=""></a>WHY US</li>
            <li><a href=""></a>BENEFITS</li>
            <li><a href=""></a>PRICES</li>
            <li><a href=""></a>CONTACT</li>
        </ul>
    </nav>
</header>

</html>

2
  • perfecto faltaba encerrarlo en un div exacto, porque era necesario para que funcionase?. Muchas gracias
    – FranyxD
    el 30 sep. 2022 a las 15:33
  • 1
    Es como decir que estamos creando una caja que encierra a esas dos clases que menciono y le aplico esas propiedades. el 30 sep. 2022 a las 15:37
0

Algo se te complico con los z-index, está bastante enredado tu código. Te mando un ejemplo muy básico donde ves que el segundo div está por detrás del primero. Ojo porque z-index no hace nada si no hay position:relative (o algun otro)

ejemplo

Suerte !!

2
  • intento replicarlo con mi código y pasa por debajo del title creo pero no por debajo del background header
    – FranyxD
    el 30 sep. 2022 a las 14:14
  • 1
    Hola Kobino, gracias por tu respuesta. El código en enlaces externos no es útil, podría romperse en el futuro. Agrega tu código en un ejemplo mínimo verificable. Por favor revisa: ¿Cómo escribo una buena respuesta? el 30 sep. 2022 a las 14:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.