Hello,
I’m in Pro (1.2.3) and would like to be able to add a search modal to the actual menu similar to how it is in X or if using the classic menu in Pro. Also looking for a solution to adding search to the mobile off-canvas menu.
1 Like
Hello There,
Thanks for writing in! If you are using Pro theme and do not have a custom header. You can add the Search menu icon as a menu item along with the modal popup search form (upon clicking the search icon), by simply enabling it in X > Launch > Options > Header > Search. This option setting will activate search functionality for the navbar. If activated, an icon will appear that when clicked will activate the search modal.
Please let us know how it goes.
I’m aware of that. I’m looking for a solution when using a custom menu. Currently the nav elements don’t allow one to add a search element.
I was also looking for a way to add search to the off-canvas mobile menu. In its current state, that element is a bit limiting. Especially if using the center logo, split menu layout, or multiple menus in the desktop view, the mobile menu options only allow one menu to be added. This makes it so one needs to maintain a separate mobile menu, which seems unnecessary.
Hi there,
The Modal Search element is a separate entity in the header builder in Pro and you can not add it inside the menu. You can add it separately in the header and try to play with the flexbox options to make it look like the last menu item. Like what I have done in this example:
Also, you can not have Search Modal functionality inside the Off Canvas element in the header Pro. And yes you can not have multiple menus assigned to the off-canvas element and it can have only one.
A workaround can be done with a little bit customization which we will give directions, but you will have to implement it yourself.
You can add a search Icon as the last option of your menu by going to Appearance > Menus.
Then from that screen enable the CSS Classes by clicking on the Screen Options at the top right section. Then you will have an option to add a unique class for each menu item. Add a unique class for that search menu item.
Then you will need to add a Javascript code to Pro > Launch > Theme Options > JS which will trigger the click event of the Search Modal element in the header.
You will need to add an ID to the search modal element and hide it on all screen sizes. Imagine you add the unique class name of search-menu-item for the menu item and an ID of the-search-modal for the search modal element. The Javascript will be something like this:
jQuery('.search-menu-item').on('click', function() {jQuery('#the-search-modal').trigger('click');});
Thank you.
Thanks for the tips. I was looking to have a inline search in the mobile off-canvas menu and modal in the desktop views. I’m guessing having separate mobile/desktop menus in WP would be ultimately be best. It would be nice if Pro offered the same options for search in the menu as X or Pro with the standard menu does. Maybe as Pro evolves its builders and element options they may be an option in the future.
Hello There,
Thanks for updating in! We certainly appreciate your feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.
Thanks!