I add this in the customzr support forum as well and it was resolved there, but for anyone else having trouble figuring this issue out here were their instructions (which did work and was super easy)
“Hello Amanda,
that snippet let’s you display the search in the menu. So when you have a side menu it will display it there.
But there’s a simple trick you can use to display it in the header.
Follow these simple steps:
1) Create a dummy menu in Appearance -> Menus, and set it as secondary menu.
No matter what you put in it, we’ll not display it.
2) Go in Appearance -> Customize -> Header -> Navigation Menus. And check “Display a secondary(horizontal) menu in the header”. If not already set set the “dummy” menu as secondary menu
3) Under: “Choose a mobile devices (responsive) behaviour for the secondary menu.”
choose: “Display in the header”.
4) In the snippet you linked make these basic changes:
– Replace, in the following instruction, ‘main’ with ‘secondary’
if( !($args->theme_location == ‘main’) )
So we say to put the search in the secondary menu.
– Make the following instruction:
return $items . ‘<li class=”my-nav-menu-search”>’ . get_search_form(false) . ”;
become:
return ‘<li class=”my-nav-menu-search”>’ . get_search_form(false) . ”;
(so basically remove $items .)
Here we said to display just the search in the secondary menus.
We’re almost there:
5) In the css, before:
@media (max-width: 979px){
add this:
.tc-second-menu-on .nav-collapse {
width: auto;
clear: none;
top: 5px;
float: right;
margin-right: 5px;
}
.sticky-enabled .tc-second-menu-on .nav-collapse { top: 7px; }
.tc-second-menu-on .nav-collapse {
width: auto;
clear: none;
top: 5px;
float: right;
margin-right: 5px;
}
.sticky-enabled .tc-second-menu-on .nav-collapse { top: 7px; }
6) In the css, inside the media query, after this: .navbar .nav {
width: auto;
}
add this:
top: 10px;
}
.tc-second-menu-on .nav-collapse {
top: 10px;
}`
`
And there we are.
Hope this helps.”;/”
