Search box in Ubermenu & Layered Navigation Element

[dannikb]

Hi,
Using Pro and the Ubermenu plugin, and it’s working just great, but now the client wants to add “search” to the menu.

I’m using the “Navigation Layered” element for the mobile menu and “Navigation Inline” for the desktop menu. Both are pointed to the primary menu.

When I follow the directions in UberMenu’s documentation to add the Search box (using their shortcode), it works on desktop just fine. However, in mobile, the word “Search” appears, but it’s not the actual search field and you cannot interact with it at all.

Any ideas?

[ruenel]

Hello Dannette,

Thanks for writing in!

Is your Navigation Layered element using the same menu as what the Navigation Inline is using? To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Meanwhile, for mobile, have you tried using the Search element adding it next to the Navigation Layered element?

Please let us know how it goes.

[dannikb]

The url is for my dev site (bwcas.dannibennett.com), but there is a password to see the site. I’ll send it in a secure reply.

Both the Layered and Inline elements are using the same menu. However, I’ve hidden the “search” item (using UberMenu) on desktop because I plan to implement it differently on desktop.

I haven’t tried the adding the search element separately on mobile because I don’t think it would look right laid out that way.

Thank you!

[christian]

Hey Dannette,

Regretfully, there’s currently no way to add a search field inside Navigation elements. You’ll need to add Search element separately.

The furthest we could do for now is to add this as a feature request so that it could be taken into account for future product developments.

Thank you for understanding.

[christian]

UPDATE: If popping up a Search Modal is okay, I’ll show you the steps.

1. Add a Custom Link to your menu and assign a class to it. Make sure the Class field is enabled in the Menu Screen Options.
   
2. Add a Search Modal element to your bar and assign a class to it.
   
3. Hide the Search Modal’s Toggle by adding this code in the Search Modal’s Element CSS.

$el.x-anchor-toggle {
  display:none;
}

4. Add this code in the Header JS.

(function($) {
  $('.search-menu').on('click touchstart', function() {
    $('.x-anchor-toggle.search').trigger('click');
  });
})(jQuery)

If followed correctly, clicking on the Custom Link in the menu will trigger the Search Modal.

Please just note that the purpose of showing you the codes is to let you know what’s possible. If the provided instruction doesn’t work for you, you should hire a third-party developer to implement it for you and fix and/or enhance it.

Hope that helps.

[dannikb]

This worked perfectly, and I am happy with the modal. (It’s actually what I preferred), so thank you so much!

[nabeel]

Glad we could help.

Cheers!