[xtjoeywxParticipant]

Hi, I have searched through this forum and I can’t find anything that would help me. I’ve tried turning off Minify settings on my caching plugin and I even deactivated the caching plugin and it doesn’t seem to change anything. Could you please take a look for me?

[xtjoeywxParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please activate parent theme and check if it solves the issue. This could be caused by one of customized files in child theme.

If it doesn’t help, please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.

[xtjoeywxParticipant]

Instead of trying to fix this problem, I am now actually thinking it would be better to have more of a suggestive results type of a search bar.

Something that searches for both products and articles. Something like this:
https://wordpress.org/plugins/jano-wp-woocommerce-advanced-search/

It is activated with this shortcode:
[bt_search_form Placeholder="Search Articles and Products" posttype="post,product" perPage="10" loader="loader-2" loaderImg="" ]
Could you tell me which file to add to my child theme and how the short code would be implemented into the code?

I also would like to have a search icon only and then the search bar show up beneath it after it’s clicked. – I’m not sure if you can help me with this part of it but it would be great if you gave me any help with it.

[LelyModerator]

Hi There,

To implement that shortcode on the navigation, please add the following code on your child theme’s functions.php file:

  function x_navbar_search_navigation_custom( $items, $args ) {

      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . do_shortcode('[bt_search_form Placeholder="Search Products" posttype="product" perPage="10" loader="loader-1" loaderImg="" resultContainerWidth="650px" ]') 
                . '</li>';
      }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_custom', 9998, 2 );

Then add the following CSS on Appearance > Customize > Custom > CSS:

label.btsearch-label {
    opacity: 0;
}

See attached screenshot of the result of implementation.
Unfortunately, hiding the search bar by default and enabling it onclick can be achieve via customization only. As stated on the sidebar customization of any third party plugins is outside the scope of our support. You might want to consult a developer to achieve this. Thank you for understanding.

[xtjoeywxParticipant]

That works. The only problem is that is it not centered with the icons in the nav bar and it’s a little large. I tried to add some more css but it won’t change. Maybe I’m not doing it right. I’m still learning CSS.

FYI, the same search bar is also in the sidebars. I would only like change the css for the search bar in the nav only. It would be nice if the search bar was close to the same height as the add to cart button and centered with the nav items. Also, fyi, I added some css to make the nav bar shrink after scroll.

My site url and credentials are above if you need it. I took the code you gave me back out of functions.php and custom css since it is a live site and I didn’t want it to look bad while waiting for your reply.

Thanks a ton for your help!

[ChristopherModerator]

Hi there,

Search icon aligns perfectly in navbar, please see the attachment.

Let us know if you’re referring to another search icon or provide us with screen shot and let us know how it should look.

Thanks.

[xtjoeywxParticipant]

Hi Christopher. Yes, I’m referring to another search icon and bar called jano wp woocommerce advanced search. Please read this entire thread, it’s all here.

Also please see my screen shot. Thanks in advance. 🙂

[RadModerator]

Hi there,

Another support here and thanks for providing a screenshot. On what page I may able to find that search input? As you can see from Chris’s screenshot, it’s different from your screenshot. And that’s what I’m currently getting too.

Is there any special procedure to get that search input?

But yes, I can see the search input in the sidebar.

Thanks!

[xtjoeywxParticipant]

Please read the entire thread. I’ll summarize it.. Lely (another Themeco support person) gave me code (above ^) to add a different search bar to my nav bar. This code puts the custom search bar in the nav on every page. Everything works perfectly except it isn’t centered vertically with the text in the nav bar. It sits at the top of the nav bar (see my screen shot above ^). I’ve tried to style it myself but I can’t figure it out. The reason why you can’t see the search bar when you go to the site is because It looks bad on a live site so I deleted it. I’ll add the code Lely gave me again when you guys can give me the right css code to make sure the search form is centered in the nav bar.

Simply that. Thanks in advance. 🙂

[JackKeymaster]

Hi there,

Thanks for writing back!

Do you perhaps have a staging site you can add the code to? As normally, it’s best to check the actual site it’ll be used on and then use developers tools to check the CSS, which is what we usually do, that ensures the CSS works perfectly on your site, rather than acting differently to how it works on ours, as for example there could be plugins or custom classes that conflict with what’s provided.

Thanks for your understanding! 🙂

[xtjoeywxParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

To adjust the position and the size, please also add the following custom CSS:

div#formid57283791be0be {
    padding-top: 19px;
}
.scrolled .desktop .x-nav > li > div#formid57283791be0be {
    padding-top: 8px;
}
form.bt-advance-search {
    margin-bottom: 0 !important;
}
.bt-search-field-container .bt-search-field {
   height: 26px;
}
.bt-search-submit {
    font-size: 14px;
    padding: 6px 4px !important;
}

See attached screenshot of the result of above custom CSS.

Hope this helps.

[xtjoeywxParticipant]

That doesn’t seem to be working for me. Let’s just go back to the original topic of the X Theme Nav search bar not working. You can see what I’m talking about if you go to our site and try to click on the search icon in the nav bar.

[xtjoeywxParticipant]

This reply has been marked as private.

[Author]

Posts