How to Slide Down Search Box in a Full Screen Overlay in Genesis
/* Search Box in Full Screen Overlay
------------------------------------------------------ */
a.search-icon {
font-size: 30px;
padding: 22px 24px;
}
.genesis-nav-menu a.search-icon:hover {
color: #1ac5a5;
}
body .overlay {
background: rgba(26,197,165,0.9);
}
body .overlay .overlay-close {
background-image: url(images/cross.png);
}
.admin-bar .overlay .overlay-close {
margin-top: 32px;
}
.overlay .search-form {
text-align: center;
position: relative;
top: 50%;
/*height: 60%;*/
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay .search-form {
margin: 0 auto;
}
.overlay .search-form input[type="search"] {
width: 500px;
}
.overlay .search-form input[type="submit"] {
font-family: FontAwesome;
clip: inherit;
width: 55px;
height: 55px;
font-size: 55px;
background: transparent;
color: #fff;
position: static;
margin-left: 10px;
padding: 0;
vertical-align: top;
}
.overlay .search-form input[type="submit"]:hover {
color: #333;
}
@media screen and (max-height: 30.5em) {
.overlay .search-form {
/*height: 70%;*/
font-size: 34px;
}
}
@media only screen and (max-width: 768px) {
a.search-icon {
font-size: 16px;
padding: 20px 16px;
}
.overlay .search-form {
height: 70%;
}
}
@media only screen and (max-width: 568px) {
.overlay .search-form {
height: auto;
}
.overlay .search-form input[type="search"] {
width: 300px;
}
.overlay .search-form input[type="submit"] {
vertical-align: middle;
}
}
@media only screen and (max-width: 568px) {
.overlay .search-form input[type="search"] {
width: 200px;
}
}
jQuery(function( $ ){
$('#trigger-overlay').click(function(){
$('.overlay .search-form input[type="search"]').focus();
})
});
<?php
//* Do NOT include the opening php tag
//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
}
add_filter( 'wp_nav_menu_items', 'sk_menu_extras', 10, 2 );
/**
* Filter menu items, appending a a search icon at the end.
*
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function sk_menu_extras( $menu, $args ) {
//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
if ( 'primary' !== $args->theme_location )
return $menu;
$menu .= '<li class="menu-item alignright"><a id="trigger-overlay" class="search-icon" href="#"><i class="fa fa-search"></i></a></li>';
return $menu;
}
//* Enqueue Search in Overlay Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {
wp_enqueue_style( 'style3', get_stylesheet_directory_uri() . '/css/style3.css' );
wp_enqueue_script( 'modernizr', get_stylesheet_directory_uri() . '/js/modernizr.custom.js' );
wp_enqueue_script( 'classie', get_stylesheet_directory_uri() . '/js/classie.js', '', '', true );
wp_enqueue_script( 'demo1', get_stylesheet_directory_uri() . '/js/demo1.js', '', '', true );
wp_enqueue_script( 'global', get_stylesheet_directory_uri() .'/js/global.js' , array( 'jquery' ), '1.0.0', true );
}
//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {
return esc_attr( '' );
}
//* Overlay content
add_action( 'genesis_after', 'sk_search' );
function sk_search() {
echo '<div class="overlay overlay-slidedown">';
echo '<button type="button" class="overlay-close">Close</button>';
get_search_form();
echo '</div>';
}