A
AlexxxBcN
Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola , tengo este code menu , y me gustaria que solo se muestre en mobil y ocultarlo para desktop
Pero poniendo esto , se me sigue viendo
#toggle{display:none}
Alguna ayuda / idea ?
Pero poniendo esto , se me sigue viendo
#toggle{display:none}
Alguna ayuda / idea ?
HTML:
<nav class="navi">
<input type="checkbox" id="toggle" checked>
<label for="toggle" class="button"></label>
<section class="menu">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Vacancies</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
[MENTION=16931]medi[/MENTION]a only screen and (max-width : 640px) {
header {
position: absolute;
box-shadow: 0 0 5px #000;
}
nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0;
float: none;
}
.navi {
width: 100%;
text-align: center;
margin: 0 auto;
}
/*Transition effect*/
.navi .menu {
padding: 36px;
margin: 57px 10px 53px 49px;
background: #fff;
border: 1px solid #444;
right: 0px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
background: #eee;
height: auto;
position: relative;
top: 10px;
transition: top 0.5s ease-in-out;
}
.navi input#toggle {
display: none;
}
.navi input#toggle + label {
display: block;
width: 100%;
height: 87px;
background:url(menu.png) center right no-repeat #fff;
position: absolute;
right: 0;
top: auto;
cursor: pointer;
border-bottom: 1px solid #000;
z-index: 10;
}
input#toggle:checked ~ .menu {
top: -400px;
}
}
