Full Screen Overlay Search Form In Genesis

Just solving the code on how to create full screen overlay search form in Genesis Sample Theme.

Ya, after reverse the css and php code, finally I can make animated search form that work pretty smooth and light weight. And the most important is work in genesis sample theme.

For the live demo, you can check how it looks here at Digimanx. And at my other website who using Genesis sample theme.

If this is kind of animated full screen overlay search form that you meant to? then .. let’s get your hand dirty to make it your own 🙂

Creating Full Screen Overlay Search Form

Ok, here are the code that you can place on your WordPress site. First, you need to create files using notepad or Text editor and name it global.js.

If you are using macOS Text Editor, make sure to format it as plain text. Then insert the code below.

global.js code

jQuery(function( $ ){

  $('#main-nav-search-link').click(function(){
    $('.search-div').show('slow');
  });

  $("*", document.body).click(function(event){
    // event.stopPropagation();
    var el = $(event.target);
    var gsfrm = $(el).closest('form');
    if(el.attr('id') !='main-nav-search-link' && el.attr('role') != 'search' && gsfrm.attr('role') != 'search'){
      $('.search-div').hide('slow');
    }
  });

});jQuery(function( $ ){
$( '#main-nav-search-link' ).click(function(event){
if ( event.target !== this )
return;
$('.search-div' ).slideToggle(function() {
$(this).parent().toggleClass( 'search-open' );
});
});
});

Upload these files to your host. On cPanel go to folder public_html > WP Content > themes > genesis-sample > js.

You can upload these files directly from your browser or using FTP client such FileZilla etc.

Additionally you can also create the file directly from cPanel.

Adding PHP code

Next, you need to add php code to enqueue scripts and styles. To do it, In your WP Admin page go to Appearance > Editor.

Then copy and paste the PHP code below to the theme function.php. Please see the screenshot where to put the global.js code the right way.

wp_enqueue_script( 'global', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0', true );

Adding the Font Awesome or Ion Icon (Example)

To add ‘FontAwesome‘ fonts and styles to your theme, place this code at the end of the theme function.php.

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_styles' );
function custom_enqueue_scripts_styles() {

  wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );

}

But since I prefer to use Ion Icon and this tutorial meant to use Ion Icon, you may also need to add this line on your theme function.php

//* Enqueue Ionicons add_action( 'wp_enqueue_scripts', 'digi_enqueue_ionicons' ); function digi_enqueue_ionicons() {

wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION ); }

And next add_filter to your theme functions.php in order to install search form on the header nav.

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
 * Filter menu items to append a search form.
 *
 * @param string   $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function theme_menu_extras( $menu, $args ) {

  if ( 'primary' !== $args->theme_location )
    return $menu;

  $menu .= '<li class="search"><a id="main-nav-search-link" class="ion-ios-search" title="Search"></a><div class="search-div"><span class="close" title="close"><i class="icon ion-close"></i></span><span class="glass"></span>' . get_search_form( false ) . '</div></li>';
  
  return $menu;

}

Now save the change by click Update Files button on WP Themes Editor.

Check your site, and you’ll found that you have search form on your header menu.

Yeah! it still looks messy. So next, you’ll need to make it looks good by adding style with CSS.

Playing with CSS to make the full-screen overlay search form

The final touch to make animated full screen overlay search form works on Genesis Sample by using CSS a little trick.

Copy and paste code below using WordPress built-in CSS editor. You don’t need to change the original Genesis CSS file.

/* Overlay Search Form ---------------------------------- */
.nav-primary .genesis-nav-menu > .search {
  display: inline-block;
  position: relative;
  width: auto;
  padding: 0;
}
li a.ion-ios-search:before {
  font-weight: bold;
  font-style: normal;
  text-decoration: inherit;
  font-size: 2rem;
  position: absolute;
  top: 0;
  float: left;
  right: 0;
  color: #555;
}
@media only screen and (max-width: 1000px){
  li a.ion-ios-search:before {
  left: 8px;}
}
@media only screen and (max-width: 414px){
  li a.ion-ios-search:before {
  left: 4%;}
}
li a.icon-search {
  cursor: pointer;
}
/*li a.icon-search:hover {
  border-bottom: none;
}*/
.search-div {
  display: none;
  position: fixed;
  width: 0;
  border-radius: 4;
  -webkit-border-radius: 4px;
}
.search-div .search-form {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;
  height: 60px;
  width: 440px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-transition: all ease-out .5s;
  -moz-transition: all ease-out .5s;
  -o-transition: all ease-out .5s;
  transition: all ease-out .5s;
}
.search-div .search-form input[type="search"]{
  height: 100%;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #eee;
}
.search-div .search-form input:focus[type="search"]{
  border: 1px solid #ddd;
  color: #333;
  background-color: #fff;
}
.search-div .search-form input[type="submit"] {
  position: absolute;
  padding: 10px 14px;
  -webkit-border-radius: 0;
  border-radius: 0;
  color: #eee;
  background: #D75B5B;
  z-index:9999;
}
.search-form input[type="submit"] {
  font-family: FontAwesome;
  content: '\f002';
  clip: inherit;
  width: 16px;
  height: 1px;
  background: transparent;
  color: #666;
  font-size:15px;
  font-weight: normal;
}
.search-div .search-form
input:hover[type="submit"] {
  background: #333;
  color: #fff;
}
.site-header .search-form input[type="submit"],
.widget_search .button input[type="submit"] {
        font-family: FontAwesome;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
  clip: inherit;
        vertical-align: middle;
  border: 1px solid #ddd;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  right: 0;
  width: 50px;
  height: 100%;
}
/* Clear search field placeholder text on focus */
input:focus::-webkit-input-placeholder {
  color: transparent;
  border-radius: 50px;
}
input:focus:-moz-placeholder {
  color: transparent;
} /* Firefox 18- */
input:focus::-moz-placeholder {
  color: transparent;
} /* Firefox 19+ */
input:focus:-ms-input-placeholder {
  color: transparent;
} /* oldIE */
.glass {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 100%;
  background: rgba(0,0, 0,0.7);
}
.close {
  position: relative;
  top: -15px;
  cursor: pointer;
  font-weight: normal;
  color: #fff;
  z-index: 9999;
  padding: 0;
}
.close:hover {
  color: #D75B5B;
}

Dealing with viewport

So far the full screen overlay search form looks good on desktop version.

But yeah! it may look not so good on smaller screen and on mobile devices. So, you’ll need to add other css code to fix it.

@media only screen and (max-width: 1000px) {
  .nav-primary .genesis-nav-menu > .search {
    display: block;
    text-align: left;
  }
  .search-div {
    left: 0;
  }
.search-div .search-form {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: -240px;
}
.close {
  left: 50px;
  margin-top: -12px;
  float: left;
  position: absolute;
}	
}

@media only screen and (max-width: 414px) {
  .search-div {
    width: auto;
  }
.search-div .search-form {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: -240px;
  width: 250px;
}
.close {
  margin-left: -6px;
  margin-top:-12px;
  float: left;
  position: absolute;
}
}

And thats it! now you have animated fullscreen overlay search form on your Genesis Sample theme.

Other

Be creative with the css code. Because it may have positioning issue with your site design.

Use Google Chrome developer tools to check how it looks on every devices.

If you have other idea to make the CSS code more simple and clean. Please let me know on the comment section below. Thanks 🙂