Full Screen Search Overlay In Genesis

Hi everybody. In this article i will show you how to create a full screen overlay search box in genesis framework. You probably don’t know that, i’m a genesis lover. Yeah , it can be said hardcore lover. 😎 I’m researching about genesis over 1 years. One thing, i extremely noticed that, there are too few full tutorials about genesis on online. Some blogs are provide genesis tutorials, but they requires premium membership on their blog. In Mplies , every premium tutorials will be published at free. No need to purchase $$ for any tutorial. I promise. Just stay tuned.

Genesis full screen search overlay

NB: Keep in mind that you have logged in to your ftp manager. Their could be something wrong.

At first take a look on Fullscreen Overlay Effects code by Codrops. We will use the demo effect to make full screen overlay search box.


Let’s start.

Step 1:

Download the source file from here. And extract the compressed file on your computer.
Upload style3.css file on your child theme’s css folder . If there is no css folder on your child theme, then create one and put the file on this.
As the same process, upload modernizr.custom.js , demo1.js , classie.js files on your child theme’s js folder.
Now create a new file in current folder and name it global.js .
Then put this code to the file and click on save:

jQuery(function( $ ){

$('#trigger-overlay').click(function(){

$('.overlay .search-form input[type="search"]').focus();

})

});

Step 2:

In this step we are going to Make Font Awesome available on our theme. Simply Place this code to your child theme’s functions.php file.

//* 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.4.0/css/font-awesome.min.css' );

}

view raw font-awesome.php hosted with ❤ by GitHub

If you have did it with your theme in previous, then no need to do again. Just skip this step.

Step 3:

It’s the main step of this tutorial. 🙂 Add this entire code to functions.php file.(do it carefully)

add_filter( 'wp_nav_menu_items', 'mp_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 mp_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 );

if ( ! wp_is_mobile() ) {

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', 'mp_search_button_text' );

function mp_search_button_text( $text ) {

return esc_attr( '' );

}

//* Overlay content

add_action( 'genesis_after', 'mp_search' );

function mp_search() {

echo '<div class="overlay overlay-slidedown">';

echo '<button type="button" class="overlay-close">Close</button>';

get_search_form();

echo '</div>';

}

Step 4:

Almost finished . It’s the final touch 8-). In this step we are going style the full screen overlay search box. Cause without any style it will look atrocious. So simply place this code to your child theme’s style.css file.

/* 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;

}

}

view raw style.css hosted with ❤ by GitHub

 

That’s it. I hope this article helped you add full screen search overlay to your Genesis framework presents site.
Have a nice day and Good luck with your Projects! Create a beautiful websites with Genesis !

Share

Tweet

Pin