Full Screen Overlay Search Box In Genesis

Hi everybody. In this article i will show you how to create a full screen overlay search box in genesis framework. You probably don’t know that, i’m a genesis lover. Yeah , it can be said hardcore lover. ๐Ÿ˜Ž I’m researching about genesis over 1 years. One thing, i extremely noticed that, there are too few full tutorials about genesis on online. Some blogs are provide genesis tutorials, but they requires premium membership on their blog. In Mplies , every premium tutorials will be published at free. No need to purchase $$ for any tutorial. I promise.ย  Just stay tuned.

Overlay Search Box In Genesis

NB: Keep in mind that you have logged in to your ftp manager. Their could be something wrong.

At first take a look onย  Fullscreen Overlay Effects code by Codrops. We will use the demo effect to make full screen overlay search box.

Overlay Search Menu Icon

Full Screen Overlay Search Box Page

Search Result Page

Let’s start.

Step 1:

Download the source file from here. And extract the compressed file on your computer.
Upload style3.css file on your child theme’s css folder . If there is no css folder on your child theme, then create one and put the file on this.
As the same process, upload modernizr.custom.js , demo1.js , classie.jsย  files on your child theme’s js folder.
Now create a new file in current folder and name it global.js .
Then put this code to the file and click on save:

Step 2:

In this step we are going to Make Font Awesome available on our theme. Simply Place this code to your child theme’s functions.php file.

If you have did it with your theme in previous, then no need to do again. Just skip this step.

READ ALSO:  Claim A Free .Design Domain With SSL And Domain Privacy

Step 3:

It’s the main step of this tutorial. ๐Ÿ™‚ย  Add this entire code to functions.php file.(do it carefully)

Step 4:

Almost finished . It’s the final touch 8-).ย  In this step we are going style the full screen overlay search box.ย  Cause without any style it will look atrocious. So simply place this code to your child theme’s style.css file.

That’s it. I hope this article helped you add full screen search overlay to your Genesis framework presents site.

Have a nice day and Good luck with your Projects! Create a beautiful websites with Genesis !



  1. Sazu Jisu June 7, 2017
    • Masud Pilot June 7, 2017
      • Sazu Jisu June 7, 2017
        • Masud Pilot June 7, 2017

Add Comment