diff --git a/css/daux-blue.css b/css/daux-blue.css
index 3b4f6fb..0cb6335 100644
--- a/css/daux-blue.css
+++ b/css/daux-blue.css
@@ -6508,8 +6508,15 @@ body {
     display: block;
   }
 }
-@media (max-width: 480px) {
-  
+@media (max-width: 768px) {
+  .sub-nav-collapse {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .sub-nav-collapse {
+    display: block;
+  }
 }
 @media only screen and (max-width: 800px) {
   /* Force table to not be like tables anymore */
diff --git a/css/daux-green.css b/css/daux-green.css
index 2f61116..3e2b565 100644
--- a/css/daux-green.css
+++ b/css/daux-green.css
@@ -6508,8 +6508,15 @@ body {
     display: block;
   }
 }
-@media (max-width: 480px) {
-  
+@media (max-width: 768px) {
+  .sub-nav-collapse {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .sub-nav-collapse {
+    display: block;
+  }
 }
 @media only screen and (max-width: 800px) {
   /* Force table to not be like tables anymore */
diff --git a/css/daux-navy.css b/css/daux-navy.css
index c95a02a..092a138 100644
--- a/css/daux-navy.css
+++ b/css/daux-navy.css
@@ -6508,8 +6508,15 @@ body {
     display: block;
   }
 }
-@media (max-width: 480px) {
-  
+@media (max-width: 768px) {
+  .sub-nav-collapse {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .sub-nav-collapse {
+    display: block;
+  }
 }
 @media only screen and (max-width: 800px) {
   /* Force table to not be like tables anymore */
diff --git a/css/daux-red.css b/css/daux-red.css
index 6049831..84a0c78 100644
--- a/css/daux-red.css
+++ b/css/daux-red.css
@@ -6508,8 +6508,15 @@ body {
     display: block;
   }
 }
-@media (max-width: 480px) {
-  
+@media (max-width: 768px) {
+  .sub-nav-collapse {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .sub-nav-collapse {
+    display: block;
+  }
 }
 @media only screen and (max-width: 800px) {
   /* Force table to not be like tables anymore */
diff --git a/index.php b/index.php
index 2d5fd4e..d556bc0 100644
--- a/index.php
+++ b/index.php
@@ -126,6 +126,7 @@ if ($homepage && $homepage_url !== '/') {
 
 	<!-- Navigation -->
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
+	<script src="<?php echo $base_url ?>/js/bootstrap.min.js"></script>
 	<script src="<?php echo $base_url ?>/js/custom.js"></script>
 	<!--[if lt IE 9]>
 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -237,13 +238,13 @@ if ($homepage && $homepage_url !== '/') {
 				<div class="left-column article-tree span3">
 					<!-- For Mobile -->
 					<div class="responsive-collapse">
-						<button type="button" class="btn btn-sidebar" data-toggle="collapse" data-target="#sub-nav-collapse">
+						<button type="button" class="btn btn-sidebar" id="menu-spinner-button">
 					        <span class="icon-bar"></span>
 					        <span class="icon-bar"></span>
 					        <span class="icon-bar"></span>
 					    </button>
 					</div>
-					<div id="sub-nav-collapse" class="collapse in">
+					<div id="sub-nav-collapse" class="sub-nav-collapse">
 						<!-- Navigation -->
 						<?php echo build_nav($tree); ?>
 
diff --git a/js/custom.js b/js/custom.js
index 525b0f0..ae19950 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -7,4 +7,16 @@ $(function() {
 
 	// Bootstrap Table Class
 	$('table').addClass('table');
+
+	// Responsive menu spinner
+	$('#menu-spinner-button').click(function() {
+		$('#sub-nav-collapse').slideToggle();
+	});
+
+	// Catch browser resize
+	$(window).resize(function() {
+		// Remove transition inline style on large screens
+		if ($(window).width() >= 768)
+			$('#sub-nav-collapse').removeAttr('style');
+	});
 });
\ No newline at end of file
diff --git a/less/import/daux-base.less b/less/import/daux-base.less
index 58e9555..0b65fec 100644
--- a/less/import/daux-base.less
+++ b/less/import/daux-base.less
@@ -265,8 +265,11 @@ html, body {
 	}
 }
 .sub-nav-collapse {
-	@media (max-width: 480px) {
-		//display: none;
+	@media (max-width: 768px) {
+		display: none;
+	}
+	@media (min-width: 768px) {
+		display: block;
 	}
 }