Searchbar does not appear on mobile view (Pao Alto Theme)

Store Design
, , , , , , ,
1

Hello,

My Searchbar at Pao Alto Theme does not appear on mobile view.

Can somebody help me to fix this.

Greetings

2

Hi @michaelvollner5

Could you please share your store link with us for further checking?

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

3

Hi @DaisyVo

fiveangel.eu
pw: creative57

4

Hi @michaelvollner5

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 767px){
h1.logo.logo--compress {
    display: none !important;
}
search-popdown.search-popdown.mobile-menu__button.caps {
    display: block !important;
}
}

image (40).png
image (40).png354×476 47.9 KB

I noticed there is code that hides the search bar on mobile and adjusts the position of the icons on the header, which causes the search bar not to display. The code I shared with you above, intended to hide the logo when the search bar is opened and to display the search bar on mobile.

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

5

Hi @DaisyVo I added the code it works but the logo is disapeared now and it liked to see it too

Possible to make it like this!

[Menu] [Search] [Logo] [Cart] - Mobile View

viewfa.jpg
viewfa.jpg1170×215 8.2 KB

In the mobile view on the Iphone (Safari), the search bar hangs after closing.

The search bar does not hang up in the mobile view on Android (Chrome).

6

Hi @michaelvollner5

Then you can find my instructions below:

1/ Please find this code from your theme > edit code: (https://prnt.sc/BAp1OYxQjf4o). In general, it will be used in header.liquid file.

2/ Switching position of these 2 codes for each other: https://prnt.sc/irqdFMpEeBxH

3/ Searching for this code: (https://prnt.sc/V4VWGLhmB2DR) and using it right above the code “search-popdown” in step 2.

4/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2 and add the following code at the bottom of the file above tag.

Code for Step 4:

{% style %}
@media screen and (max-width: 767px){
.mobile-menu > a.mobile-menu__button + h1.logo.logo--compress {
    display: block !important;
}
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

7

Hi @DaisyVo ,

I send you a pm.