The search bar in Debut theme does not work on phone (portrate)

[slarij]

Dear ALL,

I have a problem with my shop (Debut theme). The search bar does not function on the phone (in portrait mode) However, it works on the same phone while it is in landscape mode. Also, it works on PC and Laptops. I tested it on apple and android phones and got the same issue.

I found some solutions however that did not work out for me, for example adding this code to the theme.css:

@media only screen and (max-width: 749px){
.header__search-bar-wrapper { z-index: auto !important;}}

Someone said at it to theme.scss.liquid but I can not find it on my codes

[KetanKumar]

@slarij

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Litos]

Hi @slarij ,

Please send your site and if your site is password protected, please send me the password. I will check it.

[slarij]

Thank you for your reply, here is the link

https://shop.wearesocks.de/

looking forward to your helps

[slarij]

Hi Ketan

Thank you for your reply, here is the link

https://shop.wearesocks.de/

looking forward to your help

[slarij]

Hi @Litos

Thank you for your reply, here is the link

https://shop.wearesocks.de/

looking forward to your help

[Litos]

Hi @slarij ,

You want when clicking the button here will display popup search?

Please send me the code of theme.js file, I will help you to edit it

[KetanKumar]

@slarij

yes, please confirm this look if have this look your search perfect work

[slarij]

Hi @Litos , if you open the website on a laptop or rotate your phone to landscape mode you will see how it works, I want the same thing to happen when I open it on my phone (portrait) like this image. where can I share it with you?

[slarij]

Hi Ketan,

Thanks for your reply, Actually there is already a search bar : suche up on the right side.

but the problem is that if you go to the website using your phone and click on it while it is in normal (portrait ) view and chose “Suche” you will notice that it would not function. but if you change the view to the landscape mode it will work. I want it to work in both modes as the landscape mode.

First image: the landscape mode and search bar is ok

Second image: portrait mode and search bar does not work

Third one is the landscape mode and how it shows the search bar within the other icons

Regards

Sara

[Litos]

Hi @slarij ,

Go to Actions > Edit code > Assets > style.css file and paste this at the bottom of the file:

@media (max-width: 767px) {
	.site-header__icons-wrapper .px-2 {
		display: block !important;
		padding: 0 !important;
	}
	.site-header__icons-wrapper .px-2 .cart-price {
		display: none !important;
	}
	.site-header_icon-m svg {
		transform: translateY(6px);
	}
	.site-header__icons-wrapper .px-2 svg {
		transform: none !important;
	}
}

Hope it helps!

[slarij]

Hi @Litos ,

thanks a lot! it worked fine.

I have a question here, as you can see on the phone portrait mode when I click on the three lines on the right side of the home page, the drop-down list shows up and the search bar “Suche” is there, can you please do me a favor and tel me how to activate that one instead of adding a new search bar on the home page? this is only for the portrait mode of the phone and it is OK for the PC or phone’s landscape mode.

[Litos]

Hi @slarij ,

Please send me the code of theme.js file, I will help you to edit it

[slarij]

Hi @Litos

thank you again for your reply

here is the link to the “theme.js” file.

Bests

Sara

[Litos]

Hi @slarij ,

I have sent an access request, please accept it, I will check it for you

[slarij]

Hi @Litos

Sorry again for the late reply.

Access granted.

Regards

Sara