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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Genesis Sample Theme – Animated Search Form in Nav Menu

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 or login to access the download folder :

Register for full access

Related Tutorials

  • Animated Search Form In Header Right Widget – Genesis Sample Theme

Nav Menu Search

Reader Interactions

Comments

  1. Teresa Rosche Ott says

    July 25, 2019 at 2:29 pm

    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.

    Log in to Reply
    • Brad Dalton says

      July 25, 2019 at 11:02 pm

      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.

      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.