Archived topic
Moving a product search plugin to the secondary menu position
5 replies · Started by Robin on May 30, 2022
Hello,
I have recently been helped in replacing the default search bar with a plugin. That worked which surprises me due to the fact I am so new to this. Now we are thinking that we would like to move the search box plugin from the primary navigation to the secondary navigation.
So far to get where we are I have
1) disabled the navigation search under primary navigation
2) installed the free version of Smart WooCommerce Search and created a widget with the short code [smart_search id="1"]
3) in Customizer > General I #have changed the structure to Flexbot
4) Copied the following code into the functions.php file (we are running a GP child)
add_action( 'generate_menu_bar_items', function(){
echo do_shortcode('[smart_search id="1"]');
});
5) Copied the following code into style.css
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-items .ysm-search-widget {
flex: 1;
max-width: 600px;
}
I did play around a bit with the functions.php a bit with code I cut and pasted from view page source with the items already in the secondary menu/navigation but with mixed results, mostly breaking the site.
I would really appreciate some help with moving the search box to the secondary navigation/menu if this is possible.
Many thanks
Robin
Hi Robin,
You can go to appearance > elements:
1. create a new hook element.
2. choose generate_inside_secondary_navigation as the hook
3. choose entire site as location,
4. paste your shortcode into the content area
5. tick the Execute Shortcodes box.
6. publish.
Hi Ying,
Thank you so much for the instructions. It worked perfectly.
If I wanted to make the search box large/deeper or longer/shorter (if this is possible) do I put code into the widget itself or are we looking at CSS?
Many thanks
Robin
If you want to modify the style of it, CSS should be something you need.
You have this CSS from the plugin:
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-items .ysm-search-widget {
flex: 1;
max-width: 600px;You can change the value of max-widthto control its length.
Hi Ying,
Thanks again for your help. That is the CSS that I was given on my last problem - didn't realize it was in already in the plugin. I've got so much to learn.
Thanks again.
Robin
Glad to help :)
