genesis overlay search

Full Screen Search Overlay 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.

Genesis full screen search overlay

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.

Screenshots:
serach overlay_ss1

search overlay_3

search overlay_ss2

 

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.

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 !

About the Author: Masud Pilot

I am a younger Blogger and online marketer who goes by the name of Masud Pilot. Using this blog, I hope to share information with others that may be useful to fellow help-seeking peoples, bloggers, and online marketers.

1 Comment

  1. It has the such as you understand my head! You peer to know so much approximately that, like you submitted the publication in it or anything. Personally i think you is capable of doing with a bit of delaware. h. to force the content household somewhat, but rather than this, that’s excellent website. A superb read through.. website hosting I’ll undoubtedly be back.

Leave a Reply

Your email address will not be published. Required fields are marked *