Full screen overlay

header.php

<header>
	<div class="innerContainer">
		<h1><?php the_title(); ?></h1>
		<a class="headerLogo" href="<?php bloginfo( 'url' ); ?>">
			<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" />
		</a>
		<a class="headerSearchIcon fa fa-search" href="#"></a>
		<php wp_nav_menu( array(
			'theme_location'  => 'primary',
			'container'       => 'nav',
			'container_class' => 'mainNav'
		)); ?>
	</div>
</header>
<div id="searchOverlay">
	<div class="formWrapper">
		<?php get_search_form(); ?>
	</div>
</div>

scripts.js

(function($) {
	$('.headerSearchIcon').on('click', function() {
		$('body').toggleClass('show-search');
		return false;
	});
	$(document).keyup(function(e) {
		if(e.keyCode == 27) {
			$('body').toggleClass('show-search');
		}
	});
})(jQuery);

searchform.php

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" id="searchform" method="get">
    <div>
        <label for="s" class="screen-reader-text">Search for:</label>
        <input type="text" id="s" name="s" value="" placeholder="search term:" />

        <input type="submit" value="Search" id="searchsubmit" />
    </div>
</form>
<span class="headerSearchIcon fa fa-times-circle"></span>

styles.scss

#searchform {
    input[type="text"] {
        background    : rgba(255, 255, 255, 0.2);
        border        : none;
        box-shadow    : none;
        border-radius : 0;
        border-bottom : 2px solid $white;
        height        : 75px;
        color         : $white;
    }
    input[type="submit"] {
        height      : 61px;
        color       : $blue;
        font-size   : em(24);
        font-family : $f400;
        line-height : 61px;
        padding     : 0 32px;
    }
    @include media($desktop) {
        max-width : 833px;
        margin    : 0 auto;
        input[type="text"] {
            width          : 587px;
            margin-right   : 28px;
            margin-bottom  : 0;
            display        : inline-block;
            font-size      : em(24);
            vertical-align : top;
        }
        input[type="submit"] {
            height    : 75px;
            font-size : rem(36);
        }
    }// end media($desktop)
}// end #searchform
#searchOverlay {
    .headerSearchIcon {
        position    : absolute;
        top         : 66px;
        right       : 16px;
        font-size   : 2em;
        color       : rgba(255, 255, 255, 0.8);
        z-index     : 600;
        cursor      : pointer;
        font-weight : 800;
        &:hover {
            color : $white;
        }
        @include media($tablet) {
            top   : 66px;
            right : 16px;
        }
        @include media($desktop) {
            top   : 36px;
            right : 52px;
        }// end media($desktop)
    }// end .headerSearchIcon
}

.formWrapper {
    opacity  : 0;
    position : relative;
}

.show-search .formWrapper {
    opacity : 1.0;
}

#searchOverlay {
    @include transform(translate3d(0, 0, 0));
    @include transition(background 500ms ease);
    @include user-select(none);
    position   : fixed;
    overflow-y : hidden;
    overflow-x : hidden;
    bottom     : 0;
    right      : 0;
    left       : 0;
    background : transparent;
    text-align : left;
    display    : block;

    -webkit-touch-callout : none;

    height                : 100%;
    text-align            : center;
    z-index               : -1;
    -moz-box-shadow       : none !important;
    -webkit-box-shadow    : none !important;
    box-shadow            : none !important;
}
.show-search #searchOverlay{
    background : $blue;
    z-index    : 10;
    top        : 0;
    overflow-y : auto;
    @include media($desktop) {
        z-index : 20;
    }// end media($desktop)
}
#searchOverlay .formWrapper {
    position   : relative;
    overflow-y : hidden;
    overflow-x : hidden;
    top        : 0;
    left       : 0;
    bottom     : 0;
    min-height : 400px;
    height     : 100%;
    .show-search & {
        overflow-y : auto;
    }
    @include media($tablet) {
        min-height : 850px;
    }
    form {
        @include transform(translate(-40%, -50%));
        position : absolute;
        top      : 50%;
        left     : 40%;
        width    : 90%;
    }
    @include media($desktop) {
        form {
            @include transform(translate(-50%, -50%));
            position : absolute;
            top      : 50%;
            left     : 50%;
            width    : 90%;
        }
    }// end media($desktop)
}
#searchOverlay {}