Full Screen search pop up on mobile devices

I looking for the same search pop up for mobile devices i have read the post https://xtemos.com/forums/topic/full-screen-search-pop-up-on-mobile-devices/ and did the same as given. But search pop up is not working.

I have attached functions.js file
Please check the issue. Login details in private area

Functions.js link https://drive.google.com/open?id=1I6avCidO_E2T_UrZ7Ga4QlKaNIsKX2l7

Hello,

We cannot log in using this data http://prntscr.com/ou7pll

Kind Regards
XTemos Studio

Sorry this is login credential

This file download link https://gofile.io/?c=PLe2BX if you are having problem with google permission

Hello,

You missed this point:

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

Kind Regards
XTemos Studio

Thank you so much.
One more thing how to change the font size and width of search box for mobile. check screenshot attach

And auto search is not working https://gyazo.com/5afed2ca0d904ee6cf730a3b902c1ad6

Attachments:

You must be logged in to view attached files.

Hello,

1) Add this custom CSS to Custom CSS for mobile

body .woodmart-search-full-screen .searchform input[type=text]{
	font-size: 24px;
}

2) Enable AJAX option http://prntscr.com/ouh11x

Kind Regards
XTemos Studio

Thanks again i want change the width of search container also check screenshot and the “X” size also

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .woodmart-search-full-screen .searchform{
    padding-right: 62px;
    padding-left: 62px;
}
body .woodmart-close-search{
    top: 30px;
    width: 50px;
    height: 50px;
}
body .woodmart-close-search:after, body .woodmart-close-search:before{
    margin-right: -15px;
    width: 30px;
}

Best Regards

the mobile search pop up are not working anymore now please check http://www.teaklab.com

please help.

Hello,

I do not understand what you mean https://gyazo.com/9d9c0ab1107ae964d546bb282d905ac8

Please clarify the issue.

Best Regards

I resolve that. Have a minor issue please check video link https://drive.google.com/file/d/16Ddm25BuP7NUjIL-3R4e34iGqo7ToLw7/view

Whenever we scroll the home page or any page the search bar appear for a second in the bottom of the page, please see the video.

Hello,

We have tested a few times on different devices. We can not catch the problem. Please check again and provide more details on how we can reproduce the problem.

Best Regards

Please check the video, When we scroll the page the mobile search popup appear for a second in the bottom of the page, See attach marked video

https://drive.google.com/file/d/1Sf_MCf0FvEGQELNL3gxXYd19EfQ7Wruv/view?usp=sharing

I want to minified and Combined JS. The mobile search will still work after?

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

div.woodmart-search-full-screen {
    -webkit-transform: translate3d(0,calc(100% + 200px),0);
    transform: translate3d(0,calc(100% + 200px),0);
}

If you switch on JS minification it would work properly.
Don’t you mind adding your site to our showcase?

Best Regards

Thank You It’s Working fine Now.

Have one more issue i found some product pages are not behaving correctly https://gyazo.com/2e2d4a86e81e067801bbeee5395d3de2 check the screenshot when i select a variation and scroll down the page automatic scrolling down and forcing me to scroll down.

check page link: https://www.teaklab.com/product/teak-wood-round-dining-table-set/ and select variation and scroll down.
That is happening with some product pages.

🙂 Go ahead! You can add our site to your Showcase. 🙂

Its already disabled

Hello,

You need to disable sticky product page in the Theme Settings > Product page.

Best Regards

Ok But I want to use the this sticky feature. How can i use this? Can you fix this bug?

Any other options? I want to keep sticky product page feature.

But your images and content of the same size and that is why it doesn’t work as you expected. So there is no reason to enable it.

Hi, Hope you guys doing well.

I have recently updated your theme. The search icon on mobile is not working. Then I realise to update the function.js as per earlier discussion, I did and popup search working fine, but the search result page is not aligned everything is compressing. So I reset the function.js.

Let me know how can I set full screen search popup again.

Hello,

Please save the Theme Setting, update files in CSS generator if you used them and clear your cache.

Best Regards

Hi,
Still not working.
Please check the attach function.js file and Admin credential in private content.

Hello,

The mobile view can have a search form only. There is no option to have a full-width search.

Please remove your custom JS, deactivate all the plugins not related to the theme and switch the parent theme, check the issue, then activate the plugins one by one detecting which one causes the problem, then activate your child theme and check, and finally add the JS and check.

Best Regards

Hi,
I did the same. I removed custom JS.
My website is messed up after sharing the credential with you.
why am i seeing this? https://prnt.sc/tki91l it’s not there before

Search result is messed up see: https://gyazo.com/a93f142ad5646812bb343e2a67a73c54
Mobile search pop is not working see: https://gyazo.com/b504a7553d948cf6ae1c7ad00b310d86

Please fix this issues ASAP, I am using your theme from couple of years. I don’t want to switch to other theme because i like this theme. We are running ads for the weekend sale, we want to fix this issue’s asap. We are regularly purchasing theme support and instead we need that support right now.

Note: Please don’t activate the plugin’s which i deactivated.

Hello,

why am i seeing this? https://prnt.sc/tki91l it’s not there before Please move this widget to the appropriate widget area or remove: https://prnt.sc/tkm4dj

Please deactivate all the plugins not related to the theme and switch the parent theme, remove all JS codes, and check again.

Best Regards

Hi,
I did as you said. But not working. Please can you do for us?
It’s not working yet. we reset everything.

Hello,

I am checking your site. I see you have removed the text widget. I tested the search and it works: https://gyazo.com/fb1782eff4b737404eb4d89f0434a3ab

Please advise the kind of problem you have now if any.

Best Regards

[Author]

Posts