Search bar in menu on desktop, magnifier icon on mobile header

Hi @ldprecords

Yes, this is possible, but I don’t know which page builder or theme you are using so it’s hard to give you any instructions.

Regards,
Kris

Sorry, I’m using the Storefront theme and the YellowPencil plug-in for the CSS.

Could there be a php solution, to put in functions.php or so?

Hi @ldprecords

• Go to WP Admin -> WooCommerce -> FiboSearch -> Starting (tab) and enable the “Replace them” option.
• Then go to the WP Admin -> WooCommerce -> FiboSearch -> Search bar (tab) and enable:
  • Layout “Icon on mobile, search bar on desktop”, then set
  • Breakpoint option to 992px. Save,

• ?Now add the below CSS to your theme (you can use mentioned plugin).

@media(max-width: 992px) {
	.storefront-primary-navigation {
	  position: relative;
	  right: 32px;
	}
	
	.header-widget-region {
		position: static;
	}
	
	.header-widget-region .widget {
		padding: 0;
	}
	
	.header-widget-region .widget.widget_block .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
		position: absolute;
		top: 85px;
		right: 15px;
		z-index: 999;
	}
}

Regards,
Kris

Thank you, but I’m afraid I don’t get it to work. Magnifier visible nowhere.

Hi @ldprecords

It means that your website must have some modifications that make the above snippet not work. It has been prepared for the default version of the theme you are using. Unfortunately, I don’t know exactly what modifications you made. I can’t check it because I don’t know your website address.

Regards,
Kris

Sorry, it is https://www.litdeparade.nu
Thanks

Hi @ldprecords

I see that your theme uses a page builder, where you can build a header. To add FiboSearch please:

1. Go to your page builder header editor
2. Add a [fibosearch]  shortcode element next to the menu icon.
3. You can customize this shortcode:

[fibosearch layout="icon"] will add FiboSearch as an icon
[fibosearch style="solaris"] will add FiboSearch as a search bar
[fibosearch layout="flex-icon-on-mobile"]will add FiboSearch as an icon for mobile devices and as a search bar for devices with wider screens. The breakpoint can be set in WooCommerce → FiboSearch → Search bar (tab) → Mobile breakpoint (the breakpoint is enabled when Layout is set to ‘Icon on mobile, the search bar on desktop’).
[fibosearch layout="classic" mobile_overlay="1"] will add FiboSearch as a search bar but will open an overlay on mobile devices.
[fibosearch layout="icon" class="fibosearch "] will add a CSS class so you’ll be able to style the search bar independently.
4. Apply Changes and check the result.

Regards,
Kris