Adding toggle effect (similar to twenty-thirteen) search box
 

hi All, I wondered if anyone had managed to successfully add a toggle effect to the search box.

I found the following code on one of the sites:


/* twentythirteen search */
.menu-main-container {
background-color: #2B2139;
float: left;
}
#search-form {
float: right;
margin-right: 20px; /* to match your other right gutters */
background-color: #2B2139; /* if you want the purple across the bar */
}
#site-search {
background-color: transparent;
background-image: url(ata-images/search-icon-white.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 20px; /* if you want the input box the same size as the bar */
margin: 0;
padding: 0 0 0 34px;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
#site-search:focus {
background-image: url(ata-images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #fff;
cursor: text;
outline: 0;
width: 230px;
}


Can this be simply added to the insert html/css on the theme, or is it more complicated than that

and where should the code go:
<form role="search" method="get" id="searchform" class="slide" action="http://XXXXX/wordpress/">
<label class="assistive-text" for="site-search">Search for:</label>
<input type="search" placeholder="Search…" value="" name="s" id="site-search">
</form>

Why don't you give it a try? I'd put the code in the header configuration to start