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
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.
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.
Once you are connected, you need to locate the plugin’s CSS folder. You will find it under the following path:
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.