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:
- Step 1 : Add the css folder to your child themes root directory.
- 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 functiongenesis_widget_area
. That goes in functions.php - 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:
Hi! I would like to request code similar to this search overlay (I hope it’s possible). This is the primary reason I registered to your site. Instead of search showing, I need the navigation menu in it and can only be viewed in mobile.
This code pen shows the behavior:
https://codepen.io/AmsWandering/pen/oxRoxd
Clicking the hamburger icon launches the full screen overlay navigation. And a close button hides it. I can probably hard code the menu links. But I need it to show whatever is in the WordPress Menu Navigation.
Thank you very much.