Full-screen search pop-up on mobile devices

This topic has 20 replies, 3 voices, and was last updated 5 years, 4 months ago by webaits.

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
July 13, 2019 at 4:53 pm #132560

webaits
Participant

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.

July 13, 2019 at 5:59 pm #132569

Elise Noromit
Member

Hello,

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

Best Regards

July 13, 2019 at 6:06 pm #132574

webaits
Participant

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.

July 14, 2019 at 6:35 am #132594

Artem Temos
Keymaster

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

July 14, 2019 at 7:08 am #132602

webaits
Participant

Hi,

Necessary details are provided in Private section.

Thanks

July 14, 2019 at 1:22 pm #132622

Artem Temos
Keymaster

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

July 14, 2019 at 3:10 pm #132632

webaits
Participant

Hi,

Here is the information added in the private content.

Thanks

July 15, 2019 at 6:11 am #132675
Artem Temos
Keymaster
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
July 15, 2019 at 9:26 am #132693

webaits
Participant

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

July 15, 2019 at 11:37 am #132720
Artem Temos
Keymaster
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;
}
```
July 15, 2019 at 12:23 pm #132731

webaits
Participant

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

July 15, 2019 at 1:32 pm #132757

Artem Temos
Keymaster

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.

July 15, 2019 at 2:40 pm #132776

webaits
Participant

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?

July 16, 2019 at 6:04 am #132858
Artem Temos
Keymaster
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);
}
```
July 16, 2019 at 7:16 am #132884

webaits
Participant

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

July 16, 2019 at 7:44 am #132890

Artem Temos
Keymaster

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

July 16, 2019 at 7:52 am #132895

webaits
Participant

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

July 16, 2019 at 7:03 pm #132914

Artem Temos
Keymaster

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

July 17, 2019 at 6:29 am #133079

webaits
Participant

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

July 17, 2019 at 7:44 am #133095

Artem Temos
Keymaster

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

July 17, 2019 at 12:33 pm #133154

webaits
Participant

Hi,

Ok, thank you.
Author

Posts

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Full-screen search pop-up on mobile devices’ is closed to new replies.

Full-screen search pop-up on mobile devices

Create your WordPress website.