Fibo Search Icon Out of Place Mobile and Desktop

Hello,

In WooCommerce > FiboSearch > Search bar > Basic, can you leave blank so it’s set to 100% width?

Hi again,

You can also try adding the CSS code in your Theme Customizer > Custom CSS:

.search-form {
   display: grid;
   border: none;
}

Let me know if that works.

@levelupclint , I tried both but it didn’t work. Any other ideas?

Hello,

This is how it should look after applying the CSS code: https://prnt.sc/11c4me4

Can you try with the following:

.search-form {
   display: grid !important;
   border: none !important;
}

Thanks Clint! It worked like a charm both on Desktop and Mobile.

To be honest I prefer my search bar to look like this instead, any idea how I can achieve this?

https://pasteimg.com/image/cKKpb
https://pasteimg.com/image/cKFzi

Hello,

Maybe you can try removing some borders with CSS. You can also use the “Overlay on mobile” feature in WooCommerce > FiboSearch > Search bar > Layout.

Best regards,
Clint