alguien me puede ayudar con el nav bar para que sea adptable a cual monitor
resposive disgn
<link rel="stylesheet" href="css/main.css"/> <link rel="stylesheet" href="css/fonts/style.css"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<nav class="main_menu">
<li><span class="icon-flag"></span>reports
<i aria-hidden="true" class="icon-chevron-down"></i></li> <li><span class="icon-user"></span>profile
<i aria-hidden="true" class="icon-chevron-down"></i> </nav>
/*Universal*/
*{
margin:0px;
padding:0px;
font-family: helvetica Neue;
font-weight: lighter;
}
html,body{
background: #16A085;
}
div#applicationform{
position: absolute;
top:50%;
left: 50%;
margin-left: -15%;
margin-top: -13%;
width:30%;
min-height: 30%;
background: #dcdcdc;
overflow: hidden;
border-radius: 4%;
}
.sub-menu {
display:none;
position:absolute;
}
.main_menu li ul {
display:none;
}
.main_menu li:hover > ul {
display: inline-block;
margin-left: -4%;
width: 10%;
padding: 0;
background: #0D5488;
}
.main_menu
{
text-align:left;
line-height: 290%;
padding-left: 66%;
background-color: #0D5488;
}
.main_menu li
{
display: inline-block;
padding: 0 10px 0;
font-family:arial;
font-size: 100%;
color:white;
}
.sideright
{
background-color: #e5e4d7;
margin:3%;
margin-left:1%;
padding: 2%;
font-size: 82%;
float: left;
max-width: 18%;
}
p#title{
font-size: 1.6em;
text-align: center;
margin-top: 20px;
}
input[type="text"], input[type="password"], input[type="mail"]{
width: 69%;
height: 2.1em;
margin-left: 15%;
margin-top: 3%;
padding-left: 3%;
font-size: 1.1em;
outline: none;
border:0px;
background-color: #ECF0F1;
border-radius: 5px;
}
.login{
margin:4%;
margin-left: 15%;
margin-bottom: 10%;
width:71%;
height: 2.1em;
outline: none;
border: 0em;
background-color: #16A085;
color: white;
font-size: 1.2em;
border-radius: 5px;
-webkit-box-shadow:0em 0em 0em;
}
.login:hover
{
background-color: #1abc9c;
}
.separator
{
}
ol , ul
{
list-style: none;
}
.main_menu li:hover
{
background-color: #3498DB;
}
body,html#fade4
{
background-color: white;
}
.container
{
width: 100%;
margin: 0px auto;
max-width: 100%;
min-height: 20px;
overflow: hidden;
}
i
{
padding:1%;
}
Para eso debes usar media queries. Por ejemplo:
@media screen and (max-width: 500px) {
/* esconde el menú normal */
.nav > ul {
display: none;
}
/* muestra el botón para desplegar el nuevo menú */
.nav > .menu-btn {
display: block;
}
/* otras reglas */
}
La regla anterior aplica cuando la pantalla es menor o igual a 500px.