all: change how nav-collapse is styled to use a media query

3 files changed, 39 insertions, 37 deletions

diff --git a/superhero/bootstrap.css b/superhero/bootstrap.css
index d72d4f41..fe442221 100644
--- a/superhero/bootstrap.css
+++ b/superhero/bootstrap.css
@@ -4867,28 +4867,30 @@ blockquote.pull-right {
   background-color: #45515f;
   border-color: transparent;
 }
-.navbar .nav-collapse.collapse {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.navbar .nav-collapse.collapse .navbar-form,
-.navbar .nav-collapse.collapse .navbar-search {
-  border-top: none;
-  border-bottom: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.navbar .nav-collapse.collapse .nav-header {
-  color: #ece9d7;
-}
-.navbar .nav-collapse.collapse .nav li > a {
-  color: #e36b23;
-}
-.navbar .nav-collapse.collapse .nav li > a:hover {
-  background-color: #5a6a7d;
-  background-image: none;
+@media (max-width: 979px) {
+  .navbar .nav-collapse {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+  .navbar .nav-collapse .nav li > a {
+    color: #e36b23;
+  }
+  .navbar .nav-collapse .nav li > a:hover {
+    background-color: #5a6a7d !important;
+    background-image: none;
+  }
+  .navbar .nav-collapse .navbar-form,
+  .navbar .nav-collapse .navbar-search {
+    border-top: none;
+    border-bottom: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+  .navbar .nav-collapse .nav-header {
+    color: #ece9d7;
+  }
 }
 div.subnav {
   background-color: #45515f;
diff --git a/superhero/bootstrap.min.css b/superhero/bootstrap.min.css
index 0a3bc22c..c731c20f 100644
--- a/superhero/bootstrap.min.css
+++ b/superhero/bootstrap.min.css
@@ -824,10 +824,7 @@ blockquote.pull-right{border-right:5px solid #45515f;}
 .navbar .dropdown-menu::after{left:20px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #5a6a7d;}
 .navbar [class^="icon-"],.navbar [class*=" icon-"]{vertical-align:20%;}
 .navbar .btn-navbar{background-color:#45515f;border-color:transparent;}
-.navbar .nav-collapse.collapse{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .nav-collapse.collapse .navbar-form,.navbar .nav-collapse.collapse .navbar-search{border-top:none;border-bottom:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.navbar .nav-collapse.collapse .nav-header{color:#ece9d7;}
-.navbar .nav-collapse.collapse .nav li>a{color:#e36b23;}.navbar .nav-collapse.collapse .nav li>a:hover{background-color:#5a6a7d;background-image:none;}
-div.subnav{background-color:#45515f;background-image:none;border:none;}div.subnav .nav>li>a,div.subnav .nav>li.active>a{border-left:none;border-right:none;color:#ece9d7;}
+@media (max-width:979px){.navbar .nav-collapse{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .nav-collapse .nav li>a{color:#e36b23;}.navbar .nav-collapse .nav li>a:hover{background-color:#5a6a7d !important;background-image:none;} .navbar .nav-collapse .navbar-form,.navbar .nav-collapse .navbar-search{border-top:none;border-bottom:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .navbar .nav-collapse .nav-header{color:#ece9d7;}}div.subnav{background-color:#45515f;background-image:none;border:none;}div.subnav .nav>li>a,div.subnav .nav>li.active>a{border-left:none;border-right:none;color:#ece9d7;}
 div.subnav .nav>li>a:hover,div.subnav .nav>li.active>a:hover{background-color:#5a6a7d;}
 div.subnav .nav>li+li>a{border-top:0px solid transparent;}
 div.subnav .nav>li:first-child>a,div.subnav .nav>li:first-child>a:hover,div.subnav .nav>li.active:first-child>a,div.subnav .nav>li.active:first-child>a:hover{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}
diff --git a/superhero/bootswatch.less b/superhero/bootswatch.less
index 077e0415..04f8f11c 100755
--- a/superhero/bootswatch.less
+++ b/superhero/bootswatch.less
@@ -139,11 +139,23 @@ blockquote.pull-right {
 		background-color: @blue;
 		border-color: transparent;
 	}
+}
+
+@media (max-width: @navbarCollapseWidth) {
 
-	.nav-collapse.collapse {
+	.navbar .nav-collapse {
 
 		.border-radius(4px);
 
+		.nav li > a {
+			color: @orange;
+
+			&:hover {
+				background-color: lighten(@blue, 10%) !important;
+				background-image: none;
+			}
+		}
+
 		.navbar-form,
 		.navbar-search {
 			border-top: none;
@@ -154,15 +166,6 @@ blockquote.pull-right {
 		.nav-header {
 			color: @textColor;
 		}
-
-		.nav li > a {
-			color: @orange;
-
-			&:hover {
-				background-color: lighten(@blue, 10%);
-				background-image: none;
-			}
-		}
 	}
 }
 
@@ -656,4 +659,4 @@ label {
 			}
 		}
 	}
-}
+}
\ No newline at end of file