• 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

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:

gse nav menu

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.

Register for full access


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.

customize gse

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

Search

Reader Interactions

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.