WP SITES

Quote

Genesis Sample Theme – Animated Search Form in Nav Menu

—

by

Brad Dalton

This code adds a animated search box with icon to the Genesis Sample themes nav menu. In this case, the menu is hooked inside the header so the search form looks like this :

At screen widths below 960px, the form is added after the last menu item in the responsive drop down menu as shown in the following demo video :

Demo Video #

Tested using the latest default theme for Genesis. CSS may need tweaking for usage in other Genesis child themes.

Code Installation #

There’s 3 basic steps relating to usage of the files inside the download folder for logged in users :

Step 1 : Copy & paste the PHP code from the functions.php file to the end of the Genesis Sample themes functions file.

Register for full access

Related Tutorials

2 responses to “Genesis Sample Theme – Animated Search Form in Nav Menu”

  1. Teresa Rosche Ott Avatar
    Teresa Rosche Ott

    Thanks for this, Brad. It was exactly what I was looking for.

    I did have to add a couple of CSS rules to get the form to display inline instead of underneath the nav. I am using the Sample theme.

    Thought maybe I’d left some CSS in place from previous attempts at the Search form, but that doesn’t seem to be the case.

    It’s all looking/working great now but if you could shed some light on it when you have time, I’d appreciate it. LMK if you actually want to take a look and I’ll post the URL.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Hello Teresa. This tutorial was coded for the older version of the Genesis Sample child theme. This new tutorial is coded for the new version. Not sure which version you are using however 1 uses the fixed header and one doesn’t. Try this https://wpsites.net/web-design/animated-search-form-in-header-right-genesis-sample-theme/

      You are welcome to post a link to your site.

      Reply

Was This Tutorial Helpful?