Add Search Form To Secondary Navigation Menu In Genesis

Recently I got a request from one of my readers, asking me to show search form in secondary navigation in genesis theme.

Here’s the copy of the original request.

Hi Vivek,

I would like to ask you whether it’s possible or not to show the search form in secondary nav in my child theme. I am using the latest version of genesis framework. Currently, I have positioned this menu above my header area, and I have done my customization on it. I know I can switch the menu and quickly show search option in my primary menu, but I don’t want to lose my CSS styles.

So please help me.

Adding search form in the secondary menu of genesis.

Here’s the code snippet.

You have to place this code snippet except for the first line in your theme’s function.php file. I will recommend you to first create a backup of your theme before making any changes.

Here’s the CSS style to customize the look of the form.

I am using the same code on one of my blogs, and so I decided to share my style with you all. Remember that this CSS style matches to my requirement. So it many or may not work with your theme. But it will surely give you an idea on what element to edit to make the search form look correct and aligned with the menu.

If you want to use the same style as I am using, then you will have to find each element individually in your stylesheet. Once you locate the position of the element just replace it with the given code.

Finally update the sheet and then purge all your cache. You can press ctrl+f5 in windows for hard refresh.
.search-form {
overflow: hidden;
padding: 0;
}

.genesis-nav-menu .search-form input {
background-color: rgba(0, 0, 0, 0);
border: 2px solid rgba(0, 0, 0, 0.1);
color: #ebebeb;
font-family: "Montserrat",sans-serif;
padding: 12px 0;
text-align: center;
text-transform: uppercase;
width: 180px;
}

.genesis-nav-menu > .search {
margin: -18px 0 0;
padding: 0;
}

In case you face any problem with this snippet then just let me know in the comment section. And if you want me to customize the menu according to the requirement, then please contact me, and I will do it for you for free.