Heading

Store Design
1

12312321.jpg
12312321.jpg552×207 9.68 KB

How coul I do fix my header just doing single line?

2 Likes
2

Hello @n1tendo
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

3

BTW, im only trying to fix on mobile. Desktop works good!

4

Hi @n1tendo

It’s not advisable to have a full search bar on the mobile screen, as it’s not user-friendly. Instead, you should use a search icon that only appears on mobile.

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 556px){
.header-wrapper .header {
    flex-wrap: nowrap; 
}
.search__input.field__input {
    padding-right: 4rem;
}
}

And Save.

Result:

Made4uoRibe_0-1726420364289.png
Made4uoRibe_0-1726420364289.png517×333 103 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Thank you. That worked perfectly.

Btw, I tried to convert search bar to search icon but could not do it somehow

6

Is there any way I can do search icon just for mobile?

7

This requires a developer to make the necessary changes. We can implement it, but there will be a fee for our time. Please let us know if you’re interested. Thanks!