diff --git a/less/header.less b/less/header.less
index ea2ad51..11894c5 100644
--- a/less/header.less
+++ b/less/header.less
@@ -298,4 +298,39 @@
 	background: #c91106;
 	padding: 1px 2px;
 	font-family: @font-family-sans-serif;
-}
\ No newline at end of file
+}
+
+#search-form {
+	#search-button {
+		float: right;
+		max-width: 60px;
+		width: auto;
+		transition-property: max-width, padding-left, padding-right;
+		transition-duration: .2s;
+		transition-timing-function: ease;
+		overflow: hidden;
+	}
+	#search-button.hidden {
+		display: inline-block !important;
+		visibility: visible !important;
+		max-width: 0;
+		padding-left: 0;
+		padding-right: 0;
+	}
+	#search-fields.hidden {
+		max-width: 0;
+	}
+	#search-fields {
+		width: auto;
+		max-width: 100%;
+		overflow: hidden;
+		transition: max-width 0.2s ease 0s;
+		max-height: 42px;
+		float: right;
+		display: inline-block !important;
+		visibility: visible !important;
+	}
+	#search-fields input.form-control {
+		width: 100%;
+	}
+}
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index cedf5dc..b9b943c 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -123,14 +123,14 @@
 				<ul class="nav navbar-nav navbar-right">
 					<li>
 						<form id="search-form" class="navbar-form navbar-right hidden-xs" role="search" method="GET" action="">
-							<div class="hide" id="search-fields">
+							<button id="search-button" type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
+							<div class="hidden" id="search-fields">
 								<div class="form-group">
 									<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 									<a href="#"><i class="fa fa-gears fa-fw advanced-search-link"></i></a>
 								</div>
 								<button type="submit" class="btn btn-default hide">[[global:search]]</button>
 							</div>
-							<button id="search-button" type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
 						</form>
 					</li>
 					<li class="visible-xs">
@@ -199,4 +199,4 @@
 					</li>
 				</ul>
 				<!-- ENDIF !maintenanceHeader -->
-			</div>
\ No newline at end of file
+			</div>