rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

_s: Mobile-first toggle menu. 

Reverse media queries to use min-width instead of max-width, taking a
mobile-first approach to the navigation menu. It displays as the
default, and disappears at widths above 600px.

Fixes #579.
This commit is contained in:
sixhours 2014-08-17 11:07:59 -04:00 committed by Konstantin Obenland
parent b1e67446f3
commit 3bc2eeda4f
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
sass/navigation/_menus.scss
View File

@ -5,6 +5,7 @@
width: 100%;
ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
@ -67,19 +68,18 @@
}
/* Small menu. */
.menu-toggle {
display: none;
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (max-width: 600px) {
.menu-toggle,
.main-navigation.toggled .nav-menu {
display: block;
}
.main-navigation ul {
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
.comment-navigation,
@ -101,4 +101,4 @@
text-align: right;
width: 50%;
}
}
}

18
style.css
View File

@ -527,6 +527,7 @@ a:active {
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
@ -592,19 +593,18 @@ a:active {
}
/* Small menu. */
.menu-toggle {
display: none;
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (max-width: 600px) {
.menu-toggle,
.main-navigation.toggled .nav-menu {
display: block;
}
.main-navigation ul {
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
.site-main .comment-navigation,