Hello everyone I would like to know the solution of a problem I have with the main behind the drop-down menu.
If I put the menu in relative it appears to me in the following way:
This is my CSS code:
@import url('https://fonts.googleapis.com/css?
family=Open+Sans|Oswald|PT+Sans');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin:0;
padding: 0;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
background-color: #ffffff;
}
header{
width: 100%;
height:50px;
background-color: rgba(51,51,51,1);;
color: #ffffff;
position: relative;
top:0;
left: 0;
}
h2{
font-family: 'Oswald', sans-serif;
}
h1{
font-family: 'Oswald', sans-serif;
float: left;
}
/*MENU*/
header label {
float: right;
font-size: 28px;
margin: 6px 0;
}
nav.menu {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 100vh;
background: rgba(51,51,51,0.9);
transition: all 0.5s;
transform: translateX(-100%);
}
nav.menu a {
display: block;
color: #fff;
height: 50px;
text-decoration: none;
padding: 15px;
text-transform: uppercase;
}
nav.menu a:hover {
background: rgba(255,255,255,0.3);
}
/*para poder ver el menu desplegalbe en el boton*/
#menu_bar {
float: right;
display: none;
}
#menu_bar:checked ~ nav.menu {
transform: translateX(0%);
}
/*Media querys*/
@media (min-width:1024px){
nav.menu{
position: static;
width: auto;
height: auto;
transform: translateX(0%);
float: right;
display: flex;
}
.menu a{
border: none;
}
header label {
display: none;
}
}
/*FIN MENU*/
/*DIRECCTORIO DE ARTISTAS*/
div.directorio{
position: absolute;
}
/*FIN DIRECTORIO DE ARTISTAS*/
/*FOOTER*/
footer{
align-self: flex-end;
line-height: 3;
text-align: center;
width: 100%
}
.copy {
font-size: 20px;
}
footer div.contenedor {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 25px;
}
div.sociales{
width: 100%;
text-align: center;
font-size: 30px
}
div.sociales a{
color: #333;
text-decoration: none;
}
/*Media querys*/
@media (min-width:768px) {
div.sociales {
width: auto;
}
footer{
margin-top: 170px;
}
footer div.contenedor {
justify-content:space-around;
}
}
/*FIN DEL FOOTER*/