diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css
index 837388cc1d..16bcfb4198 100644
--- a/frappe/public/css/desk.css
+++ b/frappe/public/css/desk.css
@@ -358,6 +358,7 @@ fieldset[disabled] .form-control {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
+  z-index: 1041;
 }
 .ui-autocomplete a {
   transition: none;
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index b354818a3e..478fe7c1f0 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -161,6 +161,36 @@ body {
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+    width: 50px;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+#searchModal .modal-dialog,
+#searchModal .modal-content {
+  background: transparent;
+}
+#searchModal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#searchModal .modal-header form,
+#searchModal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#searchModal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
   margin-left: 15px;
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index 388f22ea83..902ab0aee7 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -27,6 +27,36 @@
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+    width: 50px;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+#searchModal .modal-dialog,
+#searchModal .modal-content {
+  background: transparent;
+}
+#searchModal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#searchModal .modal-header form,
+#searchModal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#searchModal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
   margin-left: 15px;
diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
index 5e729ab504..875a64dfd1 100644
--- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
+++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
@@ -79,7 +79,7 @@ frappe.search = {
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;
 
-		$("#sidebar-search")
+		$("#modal-search")
 			.on("focus", open_recent)
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 12fc282e68..9bdc3417ca 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -1,6 +1,6 @@
 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
 	<div class="container">
-		<div class="navbar-header">
+		<div class="navbar-header navbar-desk">
 			<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
 				<i class="octicon octicon-three-bars"></i>
 			</a>
@@ -11,15 +11,34 @@
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
 
 		<ul class="nav navbar-nav navbar-right">
-			<div class="dropdown dropdown-navbar-new-comments">
+			<li class="visible-xs visible-sm">
+				<a href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+			</li>
+			<li class="dropdown dropdown-navbar-new-comments">
 				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-					<span class="navbar-new-comments">0</span></a>
+					<span class="navbar-new-comments">0</span>
 				</a>
 				<ul class="dropdown-menu" id="dropdown-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
 				</ul>
-			</div>
+			</li>
 		</ul>
 
+		<div id="searchModal" class="modal fade" role="dialog">
+			<div class="modal-dialog" style="height: 50px;">
+				<div class="modal-content">
+					<div class="modal-header">
+						<form role="search" onsubmit="return false;">
+							<div class="input-group" style="width: 100%">
+								<input id="modal-search" type="text" class="form-control"
+								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+							</div>
+						</form>
+						<button type="button" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<div class="hidden-xs hidden-sm">
 			<ul class="nav navbar-nav navbar-right">
 				<li class="dropdown">
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index a2debad4c6..82b39b38f1 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -167,6 +167,7 @@ textarea.form-control {
 	max-height: 200px;
 	overflow-y: auto;
 	overflow-x: hidden;
+	z-index: 1041;
 }
 
 .ui-autocomplete a {
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index f9e19659d0..917398b2c7 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -35,6 +35,40 @@
 	border-radius: 4px;
 }
 
+@media (max-width: 991px) {
+	.navbar-desk {
+		width: 60% !important;
+
+		& ~ ul > li {
+			float: left;
+			width: 50px;
+		}
+	}
+	.dropdown-navbar-new-comments > a {
+		padding: 8px 0 !important;
+		margin-left: 0 !important;
+	}
+}
+
+#searchModal {
+	.modal-dialog, .modal-content {
+		background: transparent;
+	}
+	.modal-header {
+		background: #fff;
+		display: table;
+		width: 100%;
+
+		form, button {
+			display: table-cell;
+			vertical-align: middle;
+		}
+		button {
+			height: 30px;
+		}
+	}
+}
+
 .dropdown-navbar-new-comments {
 	& > a {
 		border: 0;