From 3bc2eeda4fde4cb389845b5c66cbd9531d7351c5 Mon Sep 17 00:00:00 2001 From: sixhours Date: Sun, 17 Aug 2014 11:07:59 -0400 Subject: [PATCH] _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. --- sass/navigation/_menus.scss | 20 ++++++++++---------- style.css | 18 +++++++++--------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss index 80293df..d1e6601 100644 --- 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,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%; } -} \ No newline at end of file +} diff --git a/style.css b/style.css index 8af9d61..96667ab 100644 --- 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,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,