Here is a sample of mainnav style purity III with head-search in mainnav block to start a blank project template

Create a copy of mainnav block and rename it to mainnav - p . Replace the code inside for that I'm going through and replace the call to your theme using the line

  loadBlock ( ' mainnav ' ) > by

loadBlock ( ' mainnav - p' ) >

-------------------------------------------------------------------------
Put on your custom.css the following code :
-------------------------------------------------------------------------


.head-search {
float: right;
height: 50px;
position:relative;
margin: 0px;
z-index: 1000;


}
.head-search.form {
margin: 0px;
}
.head-search .search {
background: none repeat scroll 0% 0% rgb(0, 103, 162);
}
.head-search .search {
background: none repeat scroll 0% 0% transparent;
border-left: 1px solid rgb(0, 103, 162);
border-right: 1px solid rgb(0, 103, 162);
position: relative;
}
.head-search label {
display: none;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
.head-search .search .fa-search {
color: rgb(187, 230, 255);
content: "";
display: block;
font-family: "FontAwesome";
position: absolute;
left: 20px;
top: 19px;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
.head-search .form-control {
border: 0px none;
background: none repeat scroll 0% 0% transparent;
color: rgb(187, 230, 255);
height: 50px;
position: relative;
margin: 0px;
padding: 0px 15px 0px 40px;
width: 0px;
transition: width 0.2s ease 0s;
}
@media (max-width: 480px) {
.head-search {
margin-right:50px;
height: 50px;
z-index: 1000;
margin-top:-50px;
}
.head-search .form-control:focus {
width: 200px;
}
}
@media (min-width: 480px) and (max-width: 767px){
.head-search {
margin-right:50px;
height: 50px;
z-index: 1000;
margin-top:-50px;
}
.head-search .form-control:focus {
width: 200px;
}
}
@media (min-width: 767px) and (max-width: 969px){
.head-search {
margin-right:50px;
height: 50px;
z-index: 1000;
}
.head-search .form-control:focus {
width: 200px;
}
}


----------------------------------------------------------------------------------------------
Now the code to replace within mainnav - p :
----------------------------------------------------------------------------------------------