_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.
Automattic · Apr 7, 2015 · 3bc2eed · 3bc2eed
1 parent b1e6744
commit 3bc2eed
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss
@@ -5,6 +5,7 @@
 	width: 100%;
 
 	ul {
+		display: none;
 		list-style: none;
 		margin: 0;
 		padding-left: 0;
@@ -67,18 +68,17 @@
 }
 
 /* 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;
+@media screen and (min-width: 37.5em) {
+	.menu-toggle {
+		display: none;
 	}
-
 	.main-navigation ul {
-		display: none;
+		display: block;
 	}
 }
 
@@ -101,4 +101,4 @@
 		text-align: right;
 		width: 50%;
 	}
-}
+}
diff --git a/style.css b/style.css
@@ -527,6 +527,7 @@ a:active {
 }
 
 .main-navigation ul {
+	display: none;
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
@@ -592,18 +593,17 @@ 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;
+@media screen and (min-width: 37.5em) {
+	.menu-toggle {
+		display: none;
 	}
-
 	.main-navigation ul {
-		display: none;
+		display: block;
 	}
 }