How to Add a Full Screen Search Overlay in WordPress

Recently, one of our readers asked if we could write a tutorial on how to add a full screen search overlay in WordPress. You have probably seen this on popular sites like Wired. When a user clicks on the search icon, the search box opens up and covers the whole screen which can improve user experience on mobile devices. In this article, we will show you how to add a full screen search overlay in WordPress.
The full screen search is slowly becoming a trend because it drastically improves the search experience for mobile users. Since mobile screens are very small, by offering a full screen overlay, you make it easy for users to type and search on your website.
When we first got this tutorial request, we knew it would require some code. Our goal at WPBeginner is to make things as simple as possible.
Once we had finished writing the tutorial, we realized that it was too complicated of a process, and it should rather be wrapped into a simple plugin.

Adding Full Screen Search Overlay in WordPress

First thing you need to do is install and activate the WordPress Full Screen Search Overlay plugin. For more details, see our step by step guide on how to install a WordPress plugin.
WordPress Full Screen Overlay Search plugin works out of the box, and there are no settings for you to configure.
You can simply visit your website and click on the search box to see the plugin in action.

Please note, that the plugin works with the default WordPress search feature. It also works great with SearchWP, which is a premium plugin that greatly improves the default WordPress search.
Unfortunately, this plugin does not work with Google Custom Search.

Customizing Full Screen Search Overlay

The WordPress Full Screen Search Overlay plugin comes with its own stylesheet. In order to change the appearance of the search overlay, you will have to edit the plugin’s CSS file or use !important in CSS.
First you will need to connect to your website using an FTP client. If you are new to using FTP, then take a look at our guide on how to upload files to WordPress using FTP.
Once you are connected, you need to locate the plugin’s CSS folder. You will find it under the following path:
yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/
You will find a file full-screen-search.css inside css folder. You need to download this file to your computer.
Open the file, you just downloaded in a plain text editor like Notepad. You can make any changes to this file. For example, we wanted to change the background and font color to match our demo website.

001/**

002* Reset

003* - Prevents Themes and other Plugins from applying their own styles to our full screen search

004*/

005#full-screen-search,

006#full-screen-search button,

007#full-screen-search button.close,

008#full-screen-search form,

009#full-screen-search form div,

010#full-screen-search form div input,

011#full-screen-search form div input.search {

012    font-family: Arial, sans-serif;

013    background:none;

014    border:0 none;

015    border-radius:0;

016    -webkit-border-radius:0;

017    -moz-border-radius:0;

018    float:none;

019    font-size:100%;

020    height:auto;

021    letter-spacing:normal;

022    list-style:none;

023    outline:none;

024    position:static;

025    text-decoration:none;

026    text-indent:0;

027    text-shadow:none;

028    text-transform:none;

029    width:auto;

030    visibility:visible;

031    overflow:visible;

032    margin:0;

033    padding:0;

034    line-height:1;

035    box-sizing:border-box;

036    -webkit-box-sizing:border-box;

037    -moz-box-sizing:border-box;

038    -webkit-box-shadow:none;

039    -moz-box-shadow:none;

040    -ms-box-shadow:none;

041    -o-box-shadow:none;

042    box-shadow:none;

043    -webkit-appearance:none;

044    transition: none;

045    -webkit-transition: none;

046    -moz-transition: none;

047    -o-transition: none;

048    -ms-transition: none;

049}

050

051/**

052* Background

053*/

054#full-screen-search {

055    visibility: hidden;

056    opacity: 0;

057    z-index: 999998;

058    top: 0;

059    left: 0;

060    width: 100%;

061    height: 100%;

062    background: #1bc69e;

063

064    /**

065    * Add some CSS3 transitions for showing the Full Screen Search

066    */

067    transition: opacity 0.5s linear;

068}

069

070/**

071* Display Full Screen Search when Open

072*/

073#full-screen-search.open {

074    /**

075    * Because we're using visibility and opacity for CSS transition support,

076    * we define position: fixed; here so that the Full Screen Search doesn't block

077    * the underlying HTML elements when not open

078    */

079    position: fixed;

080    visibility: visible;

081    opacity: 1;

082}

083

084/**

085* Search Form

086*/

087#full-screen-search form {

088    position: relative;

089    width: 100%;

090    height: 100%;

091}

092

093/**

094* Close Button

095*/

096#full-screen-search button.close {

097    position: absolute;

098    z-index: 999999;

099    top: 20px;

100    right: 20px;

101    font-size: 30px;

102    font-weight: 300;

103    color: #999;

104    cursor: pointer;

105}

106

107/**

108* Search Form Div

109*/

110#full-screen-search form div {

111    position: absolute;

112    width: 50%;

113    height: 100px;

114    top: 50%;

115    left: 50%;

116    margin: -50px 0 0 -25%;

117}

118

119/**

120* Search Form Input Placeholder Color

121*/

122#full-screen-search form div input::-webkit-input-placeholder { 

123    font-family: Arial, sans-serif;

124    color: #ccc;

125}

126#full-screen-search form div input:-moz-placeholder { 

127    font-family: Arial, sans-serif;

128    color: #ccc;

129}

130#full-screen-search form div input::-moz-placeholder { 

131    font-family: Arial, sans-serif;

132    color: #ccc;

133}

134#full-screen-search form div input:-ms-input-placeholder { 

135    font-family: Arial, sans-serif;

136    color: #ccc;

137}

138

139/**

140* Search Form Input

141*/

142#full-screen-search form div input {

143    width: 100%;

144    height: 100px;

145    background: #eee;

146    padding: 20px;

147    font-size: 40px;

148    line-height: 60px;

149    /* We have added our own font color here */

150    color:#50B0A6; 

151}

In this code, we have only changed background color at line 62, and added font color at line 150. If you are good with CSS, then feel free to change other style rules as well.
Once you are done, you can upload this file back to plugin’s CSS folder using FTP. You can now see your changes by visiting your website.
Important Note:
If you are using this in your own theme, then it’s better to use !important tags so the plugin updates wouldn’t override any changes.
For developers and consultants, you can also just rename the plugin and bundle it as part of your theme or services.
We only created this plugin because all other ways of writing this tutorial would’ve been too complicated for beginner users.
We hope this article helped you add full screen search overlay to your WordPress site. You may also want to see our guide on how to add a search toggle effect in WordPress
You can also find us on Twitter and Facebook.
Search Tags: Search Overlay in WordPress, Search Overlay in WordPress How to add, Search Overlay in WordPress Online learn, Search Overlay in WordPress Free Online Learn, Search Overlay in WordPress Online tutorial Online watch , Free Learn About Search Overlay in WordPress, Wordpress master provide a tutorial about Search Overlay in WordPress.