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>