Add Google Custom Search To Genesis Nav Menu

In this tutorial, i’ll show you how to add your own Google search box to any Genesis nav menu.

For this working example, i’ll be using the Genesis Sample child theme and the primary nav menu.

Click the screen shot to see the result:

There’s 2 main steps involved to get this working:

1. Create a custom widget area in your nav menu using PHP & CSS code
2. Customize the look and feel of your Google search box on

Here’s all the code you need to add to your child themes files which creates the new widget area in your nav menu.

2. Once you have created your new widget area, you’ll need to customize the look and feel of your search box.

In this example, i used the Minimalistic theme and then changed all the values for each property to this hex code color #333.

Here’s a beginners guide to Google custom search.

Note: There maybe a bit of playing around to do when customizing the search box on Google’s site and tweaking the CSS to work with your theme however i think i’ve taken most of the hard work out of it for you.

Sample GSE Javascript

Simply replace the number in the code with your own & paste it into a new text widget in your new widget area:

You can also add the search box to the secondary menu simply by changing the name in the code and modifying the CSS code colors.

So what do you think? Good solution or maybe you’ve found better.

Adding Google Custom Search To Nav Menu In Other Themes

• How To Add A Google Custom Search Box To Your Navigation Menu
• Jetpacks New Omni Search Versus Google’s Custom Search
• Add Google Custom Search In Nav Menu Of Any Theme
• Add Search Form To Any Genesis Nav Menu