• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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:

Register for full access

Related Tutorials

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

Gallery Pro Theme

Reader Interactions

Comments

  1. Karen Hernandez says

    March 12, 2020 at 2:47 am

    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.

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.