Search Form

Rather than have a large search box showing in the header, this will allow you to save real estate by shrinking the search to a magnifying glass icon until the user clicks on it.  The complete HTML5 documentation also describes the small amount of PHP code that is needed also.

Below is the CSS:

/* Start Search formatting ------------------------ */
/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.navbar .nav .my-nav-menu-search {
float: right;
}
.navbar .nav {
width: 100%;
}
.my-nav-menu-search .search-form {
position: relative;
margin: 0;
}
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
position: absolute;
left: -9999px;
overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
background: transparent;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
cursor: pointer;
height: 26px;
margin: 2px 0 2px 0;
padding: 0 0 0 36px;
position: relative;
-webkit-transition: width 400ms ease;
-moz-transition: width 400ms ease;
-o-transition: width 400ms ease;
transition: width 400ms ease;
width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
color: #80fffd;
/* change the colour above if you are working with a dark navbar background */
border: 2px solid #80fffd;
cursor: text;
outline: 0;
width: 200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0;
}
/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
font-family: 'genericons';
content: '\f400';
color: #C2AD99;
position: absolute; /* this is the key to put it visually inside the search field */
font-size: 22px;
font-weight: normal;
top: 5px; /* tune this vertical alignment inside the search field, as needed */
left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}
/* End Search formatting ------------------------ */

Pin It on Pinterest

Share This