compact header on mobile

public/less/admin/header.less

@@ -18,7 +18,7 @@
 	#user_label {
 		position: absolute;
 		right: 30px;
-		bottom: 0px;
+		bottom: 125px;
 
 		#user_dropdown {
 			font-size: 25px;

public/less/admin/mobile.less

@@ -1,15 +1,34 @@
 @media (max-width: 1200px) {
-	.header {
-		#user_label {
-			bottom: 125px;
-		}
-	}
+
 }
 
 @media (max-width: 980px) {
+	body {
+		padding-top: 90px;
+	}
+
 	.header {
+		height: 60px;
+		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+		position: fixed;
+		top: 0px;
+		z-index: 1;
+
 		#main-page-title {
-			bottom: 45px;
+			bottom: -29px;
+			font-size: 20px;
+			color: #FFF;
+			left: 20px;
+			font-weight: 400;
+		}
+
+		#user_label {
+			right: 0px;
+			bottom: 7px;
+		}
+
+		#main-menu {
+			display: none;
 		}
 	}
 }
@@ -18,5 +37,9 @@
 	.content-header, .settings-header {
 		font-size: 200%;
 		margin-bottom: 20px;
+		margin-left: -2px;
 	}
+
+
+
 }

src/views/admin/partials/menu.tpl

@@ -1,7 +1,7 @@
 <nav class="header">
 	<h1 id="main-page-title"></h1>
 	<ul id="user_label" class="pull-right">
-		<li class="dropdown pull-right hidden-xs">
+		<li class="dropdown pull-right">
 			<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
 				<i class="fa fa-ellipsis-v"></i>
 			</a>
@@ -28,7 +28,7 @@
 				</li>
 			</ul>
 		</li>
-		<form class="hidden-xs pull-right" role="search">
+		<form class="pull-right hidden-sm hidden-xs" role="search">
 			<div class="" id="acp-search" >
 				<div class="dropdown">
 					<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">