Custom Search Toggle Wordpress
http://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/
<div class="site-header-inner col-sm-10">
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) { ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
<?php } // end if ( ! empty( $header_image ) ) ?>
<div class="site-branding text-center">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri() . '/images/logo.jpg'; ?>"></a></h1>
<p class="lead"><?php bloginfo( 'description' ); ?></p>
</div>
</div>
<div class="col-sm-2">
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
</div>
CSS:
.search-form {
position: absolute;
right: 200px;
top: 10px;
}
.search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 50px 41px; /* needs to have the dimensions of search-icon.png */
border: none;
cursor: pointer;
height: 50px;
margin: 3px 0;
padding: 0 25px 0 45px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}