Sridhar Katakam

Genesis and WordPress Tutorials

How to Slide Down Search Box in a Full Screen Overlay in Genesis

by 21 Comments

In this article I show how Fullscreen Overlay Effects code by Codrops can be used to bring up a search box in a full screen overlay when a magnifying glass search icon is clicked in the Primary navigation of Genesis.

As can be seen at Tympanus' demo page, the overlay can be shown with various effects. In this example I demonstrate implementing the simple Slide Down effect.

Screenshots:

search-full-screen-overlay-trigger

search-full-screen-overlay

Screencast:

Let's go.

Step 1

Download the source code from here.

Step 2

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Cool Tutorial! I just used this on a project. I added a contact form instead of the search box though. Thanks!

    Reply

  • Loving the tutorials! You make it seem so easy. Just wondering, could the same method be used to add the search drop down to a child theme using a custom menu i.e Parallax Pro?

    Thanks.

    Reply

  • I tried to implement the slide-down search box with StudioPress’s Altitude Theme, and got half a success. (Please take a look at http://2b4.837.myftpupload.com/) The search icon shows to the right of my nav bar, but clicking on it shows no result. Before any clicking, a search box and icon and close button -all the elements of the overlay- are also displaying at the bottom of my page instead of being hidden. This bottom search box does function. I have tried deactivating plugins to eliminate those possible sources of error.

    Any suggestions on how to troubleshoot why the sliding overlay isn’t working?

    Thanks in advance for any help.

    Reply

    • I noticed that style3.css isn’t listed among the files to upload yet is referenced in the code snippet for the functions.php.

      Unfortunately, I still have yet to get this search feature working for my Genesis child theme of Altitude. My style3.css doesn’t seem to be getting loaded via the enqueue call, so my other enqueues may be failing. While I love the idea of this feature, without any ideas of how to further troubleshoot and resolve my implementation, I’m resigned to forego making it work for my website.

      Reply

      • Hooray! I’ve finally gotten this search feature to work. What I was missing was: 1) uploading css/style3.css 2) with Genesis Extender plugin I turned on the theme setting for displaying the search form as a navigation extra 3) adding .overlay-slidedown.open {z-index: 100;} to my theme’s style.css

        Reply

  • Hello Sridhar,

    great function 🙂 I need this for primary and my secondary sticky nav too. can you help me?

    kind regards
    Andre

    Reply

  • Hi,

    How it is possible to change the effect of the overlay window? I would like to use style1 but when changing the css sheet to style1 after uploading this stylesheet on my folder, the overlay window is directly opened on the window and it is impossible to close it.
    Is there something special to do to use the other effects available?
    Thanks 🙂

    Reply

    • @Recyclart

      You figure this out yet? I just did.

      Look at the last function for the overlay named – sk_search

      You need to change the seocnd div class to match whatever the demo says for each style. When you download the source files, open the .html file in a editor and look near the bottom of the file. For style1 -> index.html -> class=”overlay overlay-hugeinc” and so on.

      So make sure to upload the new css style and to also change the overlay class to match the demo content.

      Reply

  • Is it possible to keep the keyboard from showing up when you open this on mobile? I’m finding that the search field is completely hidden until you start typing on the keyboard (on iphone 6) which seems a bit confusing from a user experience standpoint.

    Reply

  • I got everything to work on magazine pro except on mobile where the responsive menu does not collapse when I click the search icon. and the overlay search form is hidden in part… Is there a way to force the responsive menu to collapse on click on the search icon ? any help would be appreciated.

    Reply

  • Is there a way to pass this part of the php

    add_filter( ‘wp_nav_menu_items’, ‘sk_menu_extras’, 10, 2 );
    function sk_menu_extras( $menu, $args ) {
    if ( ‘primary’ !== $args->theme_location )
    return $menu;
    $menu .= ‘‘;
    return $menu;
    }

    within a js query : if ( ($( window).width() > 840 ) ) {….

    any help would be very much appreciated

    Reply

  • Just added this to Parallax Pro and it put a full-span search box with the icon on the right, and a very large red close box on the left that’s repeating the X to close. Worst of all, it’s placed after the footer… Any ideas what’s happening here?

    Reply
    • >