Rendiamo responsive la navigazione partendo dal formato Phone [320/480px]:
La griglia, come noterai, occupa ora il 100% dell'ingombro orizzontale in maniera da consentire una eguale larghezza del #menu, ora sottostante all'elemento nav e non più al suo interno (avendo proprietà absolute possiamo piazzarlo dove più ci è comodo).
Conseguentemente distanzieremo #logo e box #social dai bordi laterali (25px left/right), in maniera da non averli a filo pagina.
Per evitare che il #logo venga "segato" dal menu (essendo posizionato dietro ad esso nell'HTML) applicheremogli un valore z-index maggiore di quello di default (auto, equivalente a 0).
Aggiungila alle coeve proprietà del #logo:
Codice: Seleziona tutto
z-index: 999;
Iniziamo ad interagire con le media queries; nel tuo CSS sono già presenti i breakpoint principali (ancora da riempire, ovvio) ma, come scoprirai traverso la pratica, per snellire il codice conviene sempre crearne di personalizzate in maniera da accorpare gli elementi comuni in più di una risoluzione.
Il previo #menu è condiviso dalle risoluzioni Phone (minori di 768px):
Codice: Seleziona tutto
@media only screen
and (min-width : 300px)
and (max-width : 767px) {
/* navigazione */
#menu {
top: 75px;
right: 0;
width: 100%;
height: 105px;
border-bottom: 1px solid #59BCBC;
}
#menu li {
height: 34px;
line-height: 34px;
background: #F1F1F2;
text-align: right;
padding: 0;
border-right: 0; /* elimina il bordo destro nelle voci del menu */
border-top: 1px solid #59BCBC; /* aggiunge il bordo al top nelle voci */
float: none; /* evita l'affiancamento delle voci */
}
#menu li a {
color: #59BCBC;
display: block;
padding: 0 25px 0 0; /* spazio a destra */
}
#menu li a:hover, .menu li a:active {
color: #59BCBC;
background: #FFF;
}
nav {
font-size: 16px;
}
#social {
right: 25px;
}
/* struttura principale */
.griglia {
width: 100%;
margin: 0;
}
#logo {
left: 25px;
}
}
Codice: Seleziona tutto
@media only screen
and (min-width : 300px)
and (max-width : 1024px) {
#social {
top: 28px;
width: 92px;
height: 19px;
}
#twitter, #facebook, #google {
height: 19px;
}
#twitter {
width: 25px;
margin-right: 12px;
}
#facebook {width: 22px; margin-right: 11px;}
#google {width: 22px;}
}
Codice: Seleziona tutto
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* navigazione */
#menu {
right: 125px;
}
/* struttura interna */
.griglia {
width: 92%;
}
}
Sono usa posizionare le query personalizzate aldisotto delle standard (ti sarà bastante occhiare il CSS della bozza online, nel caso intendessi secondare le mie manie).
A presto.