1

estuve buscando entre las preguntas pero no he hallado la solución. Cree un menu responsive, que al llegar a determinados pixeles este se convierte en un menu hamburguesa pero al desplegarlo, los items aparecen pero los elementos que estan por debajo, no se desplazan hacia sino que se ven por detrás (se tranparenta) Hay alguna propiedad en css que me ayude con esto? o deberia realizarlo con JS? comparto los codigos html, css y JS.

pd, pido disculpas de ante mano si no me explico correctamente, estoy iniciandome en el mundo de la programación. Saludos cordiales.

const btnMenu = document.querySelector("#btnMenu");
const menu = document.querySelector("#menu");

btnMenu.addEventListener("click", mostrarMenu);

function mostrarMenu() {
    menu.classList.toggle("mostrar");//que se le agregue una clase 
    
};
* {
    box-sizing: border-box;
}
body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 0;
}

.nav-bar {
    font-size: 1.5em;
    background-color: rgb(2, 143, 96);
    width: 100%;
    height: 50px;;
    padding: 20px;
    color: antiquewhite;
    display: flex;
    cursor: pointer;
    align-items: center;
}

.menu {
    width: 100%;
    background-color:rgb(180, 226, 211);
    margin: 0;
    margin-left: -100%;
    transition: all 0.10s;
}

.menu-item {        
    padding: 10px;    
    list-style: none;
    text-decoration: none;
    display: block ;   
}

.menu-link:hover {
    background-color: rgb(205, 190, 221);
}

.menu-link {
    text-decoration: none;
    display: block;
    padding: 20px;
    font-size: 1.1em;
}



.logo {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

header {
    display: flex;
    justify-content: flex-start;
    max-height: 30em;
    align-items: center;
    padding: 10px;
}


img {
    max-height: 10em;
    max-width: 10em;
    border-radius: 100%;
    margin-right: 20px;
}

.nombre {
    margin-left: 20px;
}

h3{
    text-align: center;
}

.mostrar {
    display: block;
    margin-left: 0;
    height: 100%;
}


/*pantallas chicas*/
@media(max-width:768px) {

    header {
    flex-direction: column;
}
.menu {
    text-align: center;
    padding: 0%;
    position:absolute;
}


}
/*pantallas anchas*/
@media(min-width:768px) {
    body {
        padding-top: 0%;
    }
    .nav-bar{
    display: none; /*desaparecemos el nav-bar una vez maximixado*/
    
}
.menu {
    justify-content: space-around;
    margin-left: 0%; /*para que se muestre*/
    display: flex; /*para qwue se muetre uno ala lado del otro*/
}
}
<header>
    <div class="logo">
        <img src="dai.jpg" alt="foto-perfil">
    </div>
    <div class="nombre">
        <h1 class="Nombre"> Daiana Aixa Gil</h1>
        <h3>Full Stack Developer</h3>
    </div>
</header>

<body>
    <span class="nav-bar" id="btnMenu"> <i class="fa-solid fa-circle-chevron-down"></i></span>
    <nav class="main-nav">
        <ul class="menu" id="menu">
            <li class="menu-item"> <a href="" class="menu-link">Sobre mi</a></li>
            <li class="menu-item"> <a href="" class="menu-link submenu-btn">Educación </i></a>
            </li>
            <li class="menu-item"> <a href="" class="menu-link">Experiencia</a></li>
        </ul>
    </nav>

    <!-- SOBRE MI-->
    <div class="sobre-mi" id="acerca-de-mi">
        <div class="descriptions">
            <div class="p-5 text-dark">
                <h2 class="text-body mb-0">Acerca de mi</h2>
                <div class="decor">
                    <hr />
                    <p class="text-muted">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ad, sunt eos nostrum magnam
                        expedita vitae commodi, veniam quos nesciunt hic a illum placeat incidunt cupiditate aspernatur
                        aut temporibus error!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ad, sunt eos nostrum magnam
                        expedita vitae commodi, veniam quos nesciunt hic a illum placeat incidunt cupiditate aspernatur
                        aut temporibus error!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ad, sunt eos nostrum magnam
                        expedita vitae commodi, veniam quos nesciunt hic a illum placeat incidunt cupiditate aspernatur
                        aut temporibus error!
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script src="logica.js"></script>
</body>

1 respuesta 1

0

Le estás dando a .menu position: absolute; lo que genera que se salga del flow normal, entonces se superpone a todo lo demás. Quitando esta propiedad obtendrás lo que estás buscando.

Por otro lado como consejo, fijate que muchas propiedades CSS están por defecto en los elementos que usas (user-agent-styles). Por ejemplo

<ul class="menu mostrar" id="menu">

Su valor por defecto es display: block; y lo vuelves a definir:

.mostrar {
display: block;
margin-left: 0;
height: 100%;
}

También, fíjate que las medidas (px, cm, rem, em, cual sea) no necesitan ser especificadas cuando el valor es 0. Ya que el 0% de algo, por ejemplo, siempre será 0. Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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