aw yeah. mobile menu styling and js completed + switched to the right

less/mobile.less

@@ -1,11 +1,10 @@
 @media (max-width: 980px) {
 	body {
 		height: 100%;
+		padding-top: 0;
 	}
 
 	.header {
-		height: 58px;
-		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
 		position: fixed;
 		top: 0px;
 		z-index: 5;
@@ -86,7 +85,7 @@
 
 	.slideout-menu {
 		position: fixed;
-		left: 0;
+		left: auto;
 		top: 0;
 		bottom: 0;
 		right: 0;

lib/persona.js

@@ -163,7 +163,8 @@ $(document).ready(function() {
 			'panel': document.getElementById('panel'),
 			'menu': document.getElementById('menu'),
 			'padding': 256,
-			'tolerance': 70
+			'tolerance': 70,
+			'side': 'right'
 		});
 
 		$('#mobile-menu').on('click', function() {
@@ -179,7 +180,7 @@ $(document).ready(function() {
 		});
 
 		function onOpeningMenu() {
-			$('#header').css({
+			$('#header-menu').css({
 				'top': $('#panel').position().top * -1 + 'px',
 				'position': 'absolute'
 			});
@@ -190,7 +191,7 @@ $(document).ready(function() {
 		slideout.on('translate', onOpeningMenu);
 
 		slideout.on('close', function() {
-			$('#header').css({
+			$('#header-menu').css({
 				'top': '0px',
 				'position': 'fixed'
 			});

templates/partials/menu.tpl

@@ -20,7 +20,7 @@
 				</div>
 			</div>
 
-			<div id="nav-dropdown">
+			<div id="nav-dropdown" class="hidden-xs hidden-sm">
 				<!-- IF !maintenanceHeader -->
 				<!-- IF loggedIn -->