Full-screen search pop-up on mobile devices

I have set search input as a form in the desktop view. On mobile devices an icon is shown on the right side. Upon clicking the icon opens the sidebar menu in the mobile.

I have unchecked the show search form option. How do I open a search input in full-screen pop-up mode on mobile devices rather pulling the mobile navigation menu.

Hello,

The search on mobile can be only as a form. You need to change the settings or delete it.

Best Regards

Hi,

Before purchasing the theme, I asked that “I want to bring the search form out of the mobile navigation and display it as a pop-up (on mobile devices only). Is that possible”.

I got the answer that it can be done. So I’m asking the implementation to do the same. My intention is to bring the search outside the mobile navigation menu.

Thanks.

Please, provide us your admin access so we can try to configure the search as you want.

Hi,

Necessary details are provided in Private section.

Thanks

Sorry, could you please also send us your FTP access since it may need file customizations too?

Hi,

Here is the information added in the private content.

Thanks

You need to do the following:

1. Edit the file woodmart/js/functions.js and remove the following line

this.mobileSearchIcon();

also, replace this line

body.on('click', '.search-button:not(.mobile-search-icon) > a', function (e) {

with this one

body.on('click', '.search-button > a', function (e) {

and this one

if (body.hasClass('global-search-dropdown') || $(window).width() < 1024) return;

with this

if (body.hasClass('global-search-dropdown')) return;

2. Go to Theme Settings -> Performance and disable Combine and minify functions for JS files.

3. Edit your header with header builder and add a full-screen search to the desktop version. (you will have two searches on desktop). https://gyazo.com/d8649cbb2a04d6d9330f030b1b2a5902

4. Hide this icon by adding the following CSS code to the Custom CSS section in Theme Settings for desktop devices only

.search-button {
	display: none;
}

5. And put this code to the custom CSS section for mobile devices and tablets

body .woodmart-search-full-screen {
    display: block;
}

Don’t forget to clean your browser cache and then check how it works.

Kind Regards

Hi,

I’ve applied the suggested tweaks and it is appearing perfectly. Thank you for this.

However, the full-screen search on the mobile/tablet is failing to display the result. You can try with terms “cotton” or “bed sheet”.

Thank

Try to add this CSS for mobile devices also

body .woodmart-search-full-screen .search-results-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 111px;
    bottom: 0;
	margin-top: 0;
}

Hi,

Search results are appearing now. Just that tiny scrollbar is the last thing needed.

Also, is there any specific reason to use “body” before the mobile/tablet specific CSS rules?

Thanks

You can try to use without this extra tag. It is used in some situations when we need to add extra priority to custom CSS code.

Hi,

Thanks for the info.

I think that a question was suppressed in my previous reply.

The tiny scrollbar is the last thing needed. It isn’t appearing with the full-screen results on mobiles/tablets. How do I make it appear?

Try to replace the previous code with this one

body .woodmart-search-full-screen {
 display: flex;
}
.woodmart-search-full-screen .woodmart-scroll .woodmart-scroll-content::-webkit-scrollbar {
  display: block;
}
.woodmart-search-full-screen .woodmart-scroll ::-webkit-scrollbar, .woodmart-search-full-screen .woodmart-sidebar-scroll ::-webkit-scrollbar {
  width: 3px;
}
.woodmart-search-full-screen .woodmart-scroll ::-webkit-scrollbar-track, .woodmart-search-full-screen .woodmart-sidebar-scroll ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .15);
}
.woodmart-search-full-screen .woodmart-scroll ::-webkit-scrollbar-thumb, .woodmart-search-full-screen .woodmart-sidebar-scroll ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .25);
}

Hi,

These JS modifications and CSS rules are perfect and full-screen mobile search is fully functional.

I’ve one more question. Is there any option that I can override the JS modifications in child theme’s JS file? Those will lose in case of updating the parent theme if implemented there.

Thanks

Unfortunately, it is not possible to override this JS file in the child theme.

Hi,

Ok so, which files I need to commit changes in order to use combined and/or minified JS versions?

Currently there are functions/function-base JS versions along with minified copies.

Thanks

We gave you only functions.js file customization. You didn’t customize any other files.

Hi,

I didn’t customize any other parent theme file except the functions.js. I was asking that which JS files do I need to customize with changes provided if I wish to use combined and/or minified JS?

Thanks

In this case, you will need to customize functions.min.js and theme.min.js.

Hi,

Ok, thank you.

[Author]

Posts