If you haven't checked it out yet, please take a look at this site's search bar. Do you like the show/hide effect? How about the look of the search bar? Personally, I think it nicely complements the look and feel of the Genesis Press Parallax Pro theme.
To accomplish this feature, I added a search form to the Genesis Header through the Genesis Simple Hooks plugin:
Yes, I could have added this directly to my functions.php, but the Simple Hooks plugin makes additions like this very easy.
The look of this search form is created entirely in CSS. There are no graphics used here.
.show-search,
#showsearch {
padding: 0;
background-color: transparent;
}
#showsearch {
font-size: 1.5em;
position: relative;
top: -5px;
}
#showsearch:hover {
color: #05ABE0;
background-color: black;
}
.search-div {
float: right;
margin-bottom: 10px;
}
.search-div .wrap {
width:440px;
}
::-moz-placeholder {
color: #999;
opacity: 1;
font-weight: 400;
}
::-webkit-input-placeholder {
color: #999;
font-weight: 400;
}
.vmf-search-form {
width: 420px;
height: 62px;
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
background-image: -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
background-image: -moz-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
background-image: -ms-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
background-image: -o-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
background-color: #151515;
background-size: 6px 6px;
padding:10px;
position: relative;
border-radius: 5px;
box-shadow: inset 0 31px 0 0 rgba(255,255,255,0.15);
border: 0.25px solid rgba(255, 255, 255, 0.6);
}
.vmf-search-input {
width: 296px;
height: 36px;
padding: 5px 0px 0px 10px !important;
background: #1b1b1b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiMWIxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1b1b1b 0%, #262626 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1b1b1b 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1b1b1b 0%,#262626 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1b1b1b 0%,#262626 100%); /* IE10+ */
background: linear-gradient(top, #1b1b1b 0%,#262626 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#262626',GradientType=0 ); /* IE6-8 */
border:1px solid #000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
-o-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
font-size: .8em;
color:#fff;
}
.vmf-search-input:focus{
outline:none;
}
.vmf-search-submit {
width: 100px;
height: 42px;
cursor: pointer !important;
background: #353535; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMzNTM1MzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMxYjFiMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #353535 51%, #1b1b1b 52%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#353535), color-stop(52%,#1b1b1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 51%,#1b1b1b 52%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 51%,#1b1b1b 52%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 51%,#1b1b1b 52%); /* IE10+ */
background: linear-gradient(top, #353535 51%,#1b1b1b 52%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-8 */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
-o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border: 1px solid #000 !important;
color: #fff;
position: absolute;
right: 11px;
top: 8.5px;
padding: 10px !important;
}
.vmf-search-submit:active{
background: #1b1b1b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiMWIxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNTM1MzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1b1b1b 0%, #353535 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#353535)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1b1b1b 0%,#353535 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1b1b1b 0%,#353535 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1b1b1b 0%,#353535 100%); /* IE10+ */
background: linear-gradient(top, #1b1b1b 0%,#353535 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#353535',GradientType=0 ); /* IE6-8 */
}
/* clears the search form placeholder text on focus */
.vmf-search-form input[type="search"]:focus::-webkit-input-placeholder { color:transparent; }
.vmf-search-form input[type="search"]:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
.vmf-search-form input[type="search"]:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
.vmf-search-form input[type="search"]:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
Finally, to include the Search Icon as the last item in the menu, add the following to functions.php.
add_filter( 'wp_nav_menu_items', 'add_show_search_button', 10, 2 );
/**
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function add_show_search_button( $menu, $args ) {
if ( 'menu genesis-nav-menu' !== $args->menu_class )
return $menu;
$menu .= '';
return $menu;
}
If you've done every things correctly, you should have a search form styled to look as the one on this site. None of this code however, provides mobile responsiveness to the form. We'll address that in another article.
