I hope you can give me a hand. What I'm Trying to do in a mobile version it's to leve the menu bar always visible using position fixed to the visitor and it work's fine, the issue is that the second div called aside it shows behind the menu bar and I really do not know how to show it after the menu bar.
I'm working in a 500px mobile version.
How can I fix this ? I hope you can help me
....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin tÃtulo</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1000px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
background-color: #f1f1f1;
height: 1000px;
max-width: 950px;
}
header{
height: 150px;
border-color: red;
border-style: dotted;
margin-bottom: 5px;
}
aside{
height: 200px;
border-color: blue;
border-style: dotted;
margin-bottom: 5px;
}
section{
height: 200px;
border-color: yellow;
border-style: dotted;
margin-bottom: 5px;
}
article{
height: 200px;
border-color: deeppink;
border-style: dotted;
margin-bottom: 5px;
}
footer{
height: 200px;
background-color: green;
border-style: dotted;
}
nav{
width: 100%;
float: left;
}
nav ul{
list-style: none;
padding: 0;
overflow: hidden;
margin-top: 56px;
}
nav ul li{
padding: 10px;
display: inline-block;
overflow: hidden;
}
nav ul li a{
color: red;
}
.menu {
display: none;
}
@media screen and (max-width:700px){
.container{
background-color: deeppink;
}
}
@media screen and (max-width:500px){
body{
margin: 0;
}
.container{
background-color: #CCCCCC;
width: 100%;
}
header{
margin-bottom: 5px;
border-style:none;
height: auto;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
}
.menu .icon-menu{
color: #fff;
padding: 10px;
font-size: 28px;
}
.menu .menu_txt{
color: #fff;
float: right;
padding: 10px;
font-size: 18px;
margin-top: 5px;
margin-right: 5px;
}
nav{
background-color: #595959;
height: 100%;
position: fixed;
width: 90%;
display: none;
}
nav ul{
border-color: deeppink;
margin-top: 0px;
}
nav ul li{
background-color: #3E3E3E;
display: block;
margin-top: 0px;
width: 100%
}
aside{
margin-top: 0px;
}
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="menu_txt">MENU</div>
<div class="icon-menu"></div>
</div>
<nav>
<ul>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
</ul>
</nav>
</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>
</div>
</body>
</html>
