Toggle Search Bar Over Site Header Menu In Genesis Child Themes

The code in this download folder enables you to add the search bar from the Monochrome Pro child theme to any other Genesis child theme.

However, this code works with a fixed header so if your child theme doesn’t include a fixed header, you can make it fixed first.

Here’s the search bar added to the Revolution Pro child theme by StudioPress :

Demo Video #

Shows the search bar displaying over the site header and nav menu when toggled.

Tested using the Revolution Pro child theme by StudioPress however will work in any Genesis child theme. Some themes may require CSS modification.

There’s 3 steps :

Step 1 – Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

Step 2 – Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Step 3 – Upload the file named search.js to your child themes js folder.

You can then check the box in Customize > Header Search Settings > Show Menu Search Icon?

Use CSS like this to align your site title

.title-area {
    margin-top: 12px;
}