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

18
sass/navigation/_menus.scss
View File

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

18
style.css
View File

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