Syed Balkhi

WPBeginner

<h4>WordPress Full Screen Search</h4>
This plugin allows you to create a full screen search overlay in WordPress.
There are no settings for this plugin. Simply activate it, and it works.
Once the plugin is activated, you can click on an existing search field or search button, and it will display the full screen search overlay.
Basically this plugin displays a full screen search overlay for your default WordPress search forms.
<h4>Credits</h4>
This plugin is created by <a href="http://www.wpbeginner.com/" title="WPBeginner" rel="friend nofollow ugc">WPBeginner</a> as part of <a href="https://syedbalkhi.com" title="Syed Balkhi - Founder of WPBeginner" rel="friend nofollow ugc">Syed Balkhi’s</a> internal project.
<h4>What’s Next</h4>
If you like this plugin, then consider checking out our other projects:
<ul>
<li><a href="http://optinmonster.com/" title="OptinMonster" rel="friend nofollow ugc">OptinMonster</a> – Get More Email Subscribers</li>
<li><a href="http://soliloquywp.com/" title="Soliloquy" rel="friend nofollow ugc">Soliloquy</a> – Best WordPress Slider Plugin</li>
<li><a href="http://enviragallery.com/" title="Envira Gallery" rel="friend nofollow ugc">Envira Gallery</a> – Best WordPress Gallery Plugin</li>
</ul>
Visit <a href="http://www.wpbeginner.com/" title="WPBeginner" rel="friend nofollow ugc">WPBeginner</a> to learn from our <a href="http://www.wpbeginner.com/category/wp-tutorials/" title="WordPress Tutorials" rel="friend nofollow ugc">WordPress Tutorials</a> and find out about other <a href="http://www.wpbeginner.com/category/plugins/" title="Best WordPress Plugins" rel="friend nofollow ugc">best WordPress plugins</a>.
We also offer <a href="http://videos.wpbeginner.com/" title="Free WordPress video tutorials" rel="friend nofollow ugc">free WordPress video tutorials</a> and numerous comprehensive guides such as <a href="http://www.wpbeginner.com/wordpress-hosting/" title="How to Choose the Best WordPress Hosting" rel="friend nofollow ugc">how to choose the best WordPress hosting</a>, <a href="http://www.wpbeginner.com/how-to-install-wordpress/" title="Step by Step Tutorial on How to Install WordPress" rel="friend nofollow ugc">how to install WordPress</a>, and more.
<h4>Note for Beginners</h4>
Like all plugins available for download, Full Screen Search Overlay is only available for self-hosted WordPress sites. This means you will need to <a href="http://www.wpbeginner.com/wp-tutorials/how-to-properly-move-your-blog-from-wordpress-com-to-wordpress-org/" rel="friend nofollow ugc">switch from WordPress.com to WordPress.org</a> if you want to use this plugin on your WordPress site. For more details, see my infographic on <a href="http://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/" title="WordPress.org vs. Free WordPress.com " rel="Friend nofollow ugc">Self hosted WordPress.org vs Free WordPress.com</a>
Lastly, do consider following WPBeginner on <a href="http://twitter.com/wpbeginner" rel="nofollow ugc">Twitter</a>, <a href="http://facebook.com/wpbeginner" rel="nofollow ugc">Facebook</a>, and <a href="http://youtube.com/wpbeginner" rel="nofollow ugc">YouTube</a>.

WordPress Full Screen Search Overlay

Create a Full Screen Search Overlay Effect in WordPress.

LebCit

PLEASE, MAKE SURE TO HAVE AT LEAST ONE POST WITH ONE CATEGORY AND ONE TAG BEFORE ACTIVATING 
Zipped : V2.7 -> 683Ko / V3.0 -> 33.6Ko ! 
MUCH LIGHTER, but STRONGER than ever !
Effect for any WordPress search input that morphs into a fullscreen overlay. 
Enlarge the search input and show 5 most recent posts, 5 most used categories and tags with counter. 
Once a search input is clicked, the whole search element expands to a fullscreen overlay. 
The fullscreen overlay has a bigger search input.
There are no settings for this plugin. Simply activate it, click on any search input and see the magic happens !
In the Customizer, look for FSMS Plugin, design it as you want ! 
You can change colors, search placeholder’s text and default icons with a styling option !
Don’t forget to take a look at the <a href="https://wordpress.org/plugins/full-screen-morphing-search/faq/" title="Frequently Asked Questions" rel="ugc">FAQ</a> Section. 
If you have some issues don’t hesitate, head over to the <a href="https://wordpress.org/support/plugin/full-screen-morphing-search" title="Support" rel="ugc">Support</a> Section ! 
If you use this plugin, please consider leaving a <a href="https://wordpress.org/support/plugin/full-screen-morphing-search/reviews/" title="Reviews" rel="ugc">Review</a> to give me a push forward 😉
<h3>Resources</h3>
This plugin is created by <a href="http://tympanus.net/codrops/author/crnacura/" title="Manoela Ilic" rel="author nofollow ugc">Manoela Ilic</a> and ported to WordPress by <a href="https://profiles.wordpress.org/lebcit/" title="LebCit" rel="author nofollow ugc">LebCit</a>. 
If you want to learn more about this plugin, visit the <a href="http://tympanus.net/codrops/2014/11/04/simple-morphing-search/" title="Simple Morphing Search" rel="nofollow ugc">Simple Morphing Search</a> original post.
<blockquote>
A <a href="https://wordpress.org/plugins/full-screen-morphing-search/#screenshots" title="Screenshots" rel="ugc">Picture</a> is worth a thousand words
</blockquote>
I think that a demo is even better ! 
See how <a href="http://tympanus.net/Development/MorphingSearch/" title="Full Screen Morphing Search" rel="nofollow ugc">Full Screen Morphing Search</a> works.
The autocompletition implemented in this plugin is based on <a href="https://github.com/TarekRaafat/autoComplete.js" title="autoComplete.js" rel="nofollow ugc">autoComplete.js</a> by <a href="https://github.com/TarekRaafat" title="Tarek Raafat" rel="nofollow ugc">Tarek Raafat</a> under the <a href="https://opensource.org/licenses/Apache-2.0" title="Apache License, Version 2.0" rel="nofollow ugc">Apache 2.0</a> License.
The main plugin icon is made by <a href="http://www.flaticon.com/authors/pixel-buddha" title="Pixel Buddha" rel="nofollow ugc">Pixel Buddha</a> from <a href="http://www.flaticon.com" title="Flaticon" rel="nofollow ugc">www.flaticon.com</a> and is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" rel="nofollow ugc">CC 3.0 BY</a> 
The article icon is made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" rel="nofollow ugc">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon" rel="nofollow ugc">www.flaticon.com</a> and is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" rel="nofollow ugc">CC 3.0 BY</a> 
The category icon is made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" rel="nofollow ugc">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon" rel="nofollow ugc">www.flaticon.com</a> and is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" rel="nofollow ugc">CC 3.0 BY</a> 
The tag icon is made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" rel="nofollow ugc">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon" rel="nofollow ugc">www.flaticon.com</a> and is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" rel="nofollow ugc">CC 3.0 BY</a>

Full Screen Morphing Search

Responsive Full Screen Morphing Search Page Overlay With Predictive Autocomplete !

WordPress Full Screen Search Overlay vs Full Screen Morphing Search