Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Full Screen Search Overlay in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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.

Adding a full screen search 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.

To make it easy, we have created a video tutorial on how to add a full screen search overlay that you can watch below.

Subscribe to WPBeginner

However if you just want to follow text-instructions, then you can follow our step by step tutorial on how to how to add a fullscreen search overlay in WordPress.

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.

Full screen search

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.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

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.

A WordPress site with Full screen search overlay

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

21 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carl says

    Will this plugin in the WordPress Repository be updated to work with the latest version of WordPress? also, I am using the Divi theme from elegant Themes, and this does not seem to work at all. Nothing happens when clicking on the search button

  3. Jasper says

    Hi There,
    Does this plugin work with woo commerce? I need a full screen search function that just searches my site for woo commerce products.
    Any help would be much appreciated!!

  4. Sameer Choudhary says

    I want to make a submit button below search box , when a full screen overlay search appears. I have tried adding normal input button and button tags as well in the full-screen-search.php, but it doesn’t work. How to accomplish it.

  5. Sameer Choudhary says

    I want to add a Submit Button below search box, when the Full Screen Search overlay Appears. Please help me

  6. Viraj Patel says

    Thanks for this amazing post but I am trying to integrate this full screen search with the google custom search just like wpbeginner search. How can I do that?

  7. Waseem Safdar says

    There appears a ‘light-colored empty space’ below the footer menu in my website InstaTix.pk , I contacted the theme developer and this is what he replied:

    “This empty space is added by “Full Screen Search Overlay” plugin.

    I tried to test with default WordPress Theme (TwentyTwelve) and I can also see additional empty space on the bottom. :(

    It is better if you can report this specific issue to the plugin developer.”

  8. Oliver Drummond says

    Great Plugin! Any chance of adding an option for using “Esc” key to close the search?

    Thanks

  9. Oliver Drummond says

    Great post and very good plugin! Thank you!!
    Is it possible to add a functionality that makes the fullscreen search box closes when we press the “Esc” key?

    Thank you!

  10. Michael says

    Hello, does anyone know how I can overlay a website on my own webpage. I am searching for a plugin but have found none. I would like to overlay a client website on my own when he rents a page on my site. So when the page is visited they see the client website not my original content. Thanks

  11. John Ullyatt says

    This is awesome. Very straightforward. How can I make the overlay only a percentage of the screen, rather than the whole thing?

  12. Axel B says

    Hello,
    I’d like to add a search engine on the help pages of my WP, which are accessible for members only. Can you tell me how to make a restriction for the search engine to the help pages, and not for the whole website please? :)

  13. Patricia Reszetylo says

    Now all we need is a “child theme” plugin that works with plugins rather than themes….

  14. Jekesh Kumar Oad says

    sir i want to know that how we can make the different posts with the same url and different catagory . ex
    example . com / games / gta
    example . com / computer / gta

Leave a Reply to Jason Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.