Tweak menu for small screens

This commit is contained in:
Paulus Schoutsen 2014-12-21 20:16:05 -08:00
parent 58ff384360
commit d98cc6f353

View File

@ -26,8 +26,13 @@ body{ -webkit-animation: bugfix infinite 1s; }
/*-------------------------------- /*--------------------------------
Presentation Styles (Editable) Presentation Styles (Editable)
---------------------------------*/ ---------------------------------*/
header .grid {
height: 68px;
}
.menu { .menu {
margin: 0; margin: 0;
top: 68px;
} }
.menu > li > a{ .menu > li > a{
@ -86,6 +91,7 @@ body{ -webkit-animation: bugfix infinite 1s; }
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: $white; color: $white;
white-space: nowrap;
} }
.toggle:hover::after{ .toggle:hover::after{
@ -98,9 +104,15 @@ body{ -webkit-animation: bugfix infinite 1s; }
} }
@media only screen and (max-width: 479px){ @media only screen and (max-width: 479px){
.toggle {
display: inline-block;
position: absolute;
top: -3px;
right: 10px;
}
.toggle::after { .toggle::after {
margin: 0 0 20px; padding: 10px 15px;
text-align: center; font-family: "FontAwesome";
width: 100%; content: "\f0c9";
} }
} }