ADDITIONAL SEARCH FUNCTION IN HEADER MOBILE / DESKTOP WEBSITE

Hello,

I would like to create the same search function in the header of my website(desktop and mobile version) as this website: https://www.babycomfort.nl/

This website also uses your Basel & Co template.

This search function is the same as your mobile search function: https://imgur.com/a/W9kiB78

This search function has a nice ‘product suggestion’ dropdown: https://imgur.com/a/ZUR8c6R

I can work with CSS, so it’s only about creating this function!

Thank you very much!

Kind Regards,

Maikel

Hello,

Please navigate to the Theme settings > Header > Other and configure the search widget.

Best Regards

Hello,

Unfortunately, I only get a search icon.

I would like to have a search bar just like: https://www.babycomfort.nl/

Best Regards,

Maikel

I have already created a search bar on my desktop version.

Now I want to display the same search bar on my mobile version like: https://www.babycomfort.nl/ (see mobile version)

Thank you!

Best wishes,

maikel

Unfortunately, there is no such kind of search bar for mobile devices in our theme. It can be displayed in the navigation bar only.

Hello,

Thank you for your information.

I have created a nice search bar for my desktop version by adding the ‘BASEL AJAX Search’ widget in the Widget Area of my header (see two images).

Perhaps I can add this ‘BASEL AJAX Search’ widget somewhere else on my mobile version by creating a HTML block? Or by adding an HTML code?

Just like on this page (see image).

Thanks for you help!

Best regards,

Maikel

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, but there is no such area in the mobile header. You can add it with additional PHP code customization. And even after this, the search will not be styled well and your header will look broken. AJAX search is located in mobile menu on small devices.

Regards

Hi support,

Thank you very much!

I almost have the desired result on my mobile version…

I only want to make the red box at the top and bottom smaller (see image).

Something like this (see image)

Best regards,

Maikel

Attachments:

You must be logged in to view attached files.

You need to edit the column with this red background with WPBakery and decrease padding from each side. Set it to 5 or 10 px for example.

Hi support,

Thank you very much!

But unfortunately, this doesn’t work at the bottom (see two images).

At the bottom the red area becomes 5px bigger instead of smaller.

Thanks for your help!

Best regards,

Maikel

Attachments:

You must be logged in to view attached files.

Hi,

Try to add extra class custom-mobile-search to the red background column (http://prntscr.com/kzdrg1) and add the following custom code to the Global Custom CSS area in Theme Settings.

.custom-mobile-search .wpb_widgetised_column {
	margin-bottom: 0;
}

Regards

Hi,

Very nice!

Great support, thank you very much!!

Is it also possible to let this scroll down with my sticky header? (see image)

Best regards,

Maikel

Attachments:

You must be logged in to view attached files.

Hello,

Now search form scrolls and the sticky header is enabled. It is not possible to make search sticky.

Best Regards

Hi support,

Thank you very much for your information!

I see that my dropdown is now falling over my home page (see image).

Can my home page also start under the dropdown? (see image)

Thank you for your help!

Best regards,

Maikel

Attachments:

You must be logged in to view attached files.

Hello,

The drop-down goes over the content and, unfortunately, it is not possible to change.

Best Regards

[Author]

Posts