Adding Search to main menu or header

See this snippet

(Edit: nvm, you already have it in your post)

Again, when I first added it, the magnifier icon was showing in the mobile/secondary window, but I was doing some things with Custom CCS, and that’s when I lost the icon.

You have to tweak the snippet to replace the Genericons magnifying glass with the FontAwesome one.

Thanks HungryGeek, I had actually tried that, but used “Font Awesome” instead of “fontawesome.” However, the icon is still not showing. If I add anything into “content” it will appear, but not the icon.

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
font-family: ‘fontawesome’;
content: ‘\’;
position: absolute; /* this is the key to put it visually inside the search field */
font-size: 19px;
font-weight: normal;
top: 5px; /* tune this vertical alignment inside the search field, as needed */
left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}

Also, I have been able to put the search at the top of the mobile/secondary window by changing “false” to “true” in the get_search_form field, as below.

// As of 3.1.10, Customizr doesn’t output an html5 form.
add_theme_support( ‘html5’, array( ‘search-form’ ) );
add_filter(‘wp_nav_menu_items’, ‘add_search_form_to_menu’, 10, 2);
function add_search_form_to_menu($items, $args) {
// If this isn’t the main navbar menu, do nothing
if( !($args->theme_location == ‘main’) ) // with Customizr Pro 1.2+ and Cusomizr 3.4+ you can chose to display the saerch box to the secondary menu, just replacing ‘main’ with ‘secondary’
return $items;
// On main menu: put styling around search and append it to the menu items
return $items . ‘<li class=”my-nav-menu-search”>’ . get_search_form(true) . ”;
}

Hi,
Make this change in your child theme’s style.css

/*
    font-family: 'genericons';
    content: '\f400';
*/
    font-family: FontAwesome;
    content: '\f002';

Thanks Menaka, I had already included the f002, but I had not capitalized the F and A in FontAwesome, and that did the trick.

However, I still can’t find a way to add a search item to the main, horizontal top menu.

Hi,
Use this snippet.
https://presscustomizr.com/snippet/adding-an-html5-search-form-in-your-wordpress-menu/
But change ‘main’ to ‘secondary’ (note the comment in the code). The horizontal menu may be main or secondary. In your case, the main menu is vertical side menu shown by the 3-bar. The horizontal menu is secondary.
Change the code in child theme’s functions.php to this.

add_theme_support( 'html5', array( 'search-form' ) );
add_filter('wp_nav_menu_items', 'add_search_form_to_menu', 10, 2);
function add_search_form_to_menu($items, $args) {
  // If this isn't the main navbar menu, do nothing
  if( !($args->theme_location == 'secondary') ) // with Customizr Pro 1.2+ and Cusomizr 3.4+ you can chose to display the saerch box to the secondary menu, just replacing 'main' with 'secondary'
    return $items;
  // On main menu: put styling around search and append it to the menu items
  return $items . '<li class="my-nav-menu-search">' . get_search_form(false) . '</li>';
}

That worked perfectly, Menaka! I was confused about main/secondary. THANK YOU!

To go a step further and for my own information, is there a way to add the search to both main and secondary menus?

Also, this may or may not be a separate issue, but I seem to be getting 2 menus on the mobile site, one after the other.

Hi,
To add the search to both menus, just remove the if condition from the code. Like this.

add_filter('wp_nav_menu_items', 'add_search_form_to_menu', 10, 2);
function add_search_form_to_menu($items, $args) {
  // On main menu: put styling around search and append it to the menu items
  return $items . '<li class="my-nav-menu-search">' . get_search_form(false) . '</li>';
}

The mobile site showing two menus is not a related problem.

Your main menu (side vertical) and secondary menu (horizontal) seem to be the same. Is it?
If they are different, it has been designed show one menu after the other in the side.

In your case, since they are same, you can choose to hide the menu.
From the customiser, go to Header -> Navigation Menus.
Under Secondary (Horizontal) Menu Design, there is an option Choose a mobile devices (responsive) behaviour for the secondary menu. Choose Hide from the dropdown.

Hope this helps.

Menaka, you don’t know how much I appreciate your help..thank you!

With your help, I now have the search on both menus and everything is functioning well, with the exception that I’m still getting a duplicate menu in mobile mode. I’ve tried every combination of settings I could find. The problem seems to be that I have a menu called “Site Menu” but not a “Main Menu.” If you have an answer, great, otherwise, I’ll take this issue to a new support ticket and mark this one closed.

Again, many thanks.

Hi Ridge Runner,
Did you try hiding the secondary menu?
From the customiser, go to Header -> Navigation Menus.
Under Secondary (Horizontal) Menu Design, there is an option Choose a mobile devices (responsive) behaviour for the secondary menu. Choose Hide from the dropdown.