Drop Down Full Screen Overlay Search Widget

This tutorial provides the code which enables you to display your search widget or any other widget in the middle of your screen like this.

The code adds a search icon to the primary nav menu which once clicked triggers a drop down overlay. The code also adds a new widget area named Overlay Widget which you can populate with the WordPress search widget or any other widget you want shown in the middle of the overlay screen.

Video Demo

Code Installation

Once you download the full screen overlay widget folder, follow these steps:

1. Step 1 : Add the css folder to your child themes root directory.
2. Step 2 : Add the functions.php code to your child themes functions file. If using the Gallery Pro child theme, add the code to register the overlay widget which includes the function genesis_register_sidebar to the widgets.php file in the includes folder of the Gallery Pro theme, but NOT the code to call the widget which includes the function genesis_widget_area. That goes in functions.php
3. Step 3 : Add/Merge the files from the js folder into your child themes js folder.

Note : Make sure you’re using the primary menu in the header menu location.

Then you can add any widget to the Overlay Widget area.

Note : The solution includes CSS to center the search form widget. If you use any other widget, you will need to change the class to match your widget if you want it centered.

Tested using the Gallery Pro child theme for Genesis by Bloom Blog Shop

Here’s the code for logged in members:

Related Tutorials

• Genesis Full Screen Slide Down Overlay for Search Box
• Full Screen Overlay Effect Widget In Genesis Sample Theme