diff --git a/src/wp-content/themes/twentyfourteen/header.php b/src/wp-content/themes/twentyfourteen/header.php
index 0a2963ced6..f9ba6d2648 100644
--- a/src/wp-content/themes/twentyfourteen/header.php
+++ b/src/wp-content/themes/twentyfourteen/header.php
@@ -39,7 +39,9 @@
 			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 
 			<div class="header-extra">
-				<div class="search-toggle"><?php _e( 'Search', 'twentyfourteen' ); ?></div>
+				<div class="search-toggle">
+					<a href="#search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
+				</div>
 			</div>
 
 			<nav role="navigation" class="site-navigation primary-navigation">
@@ -51,7 +53,7 @@
 
 		<div id="mobile-navigations" class="hide"></div>
 
-		<div class="search-box-wrapper hide">
+		<div id="search-container" class="search-box-wrapper hide">
 			<div class="search-box clear">
 				<?php get_search_form(); ?>
 			</div>
diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
index 5c617a5d9c..f0cb9f2bfe 100644
--- a/src/wp-content/themes/twentyfourteen/style.css
+++ b/src/wp-content/themes/twentyfourteen/style.css
@@ -609,6 +609,9 @@ body {
 	text-align: center;
 	text-transform: uppercase;
 }
+.search-toggle a {
+	color: #fff;
+}
 .search-toggle:hover,
 .search-toggle.active {
 	background-color: #35921f;