How to centre serch icon on mobile?

Store Design

Topic summary

A user needed help repositioning the search icon in their mobile header layout. They wanted the menu on the left, logo centered, and search button on the right, but the search icon wasn’t displaying correctly after hiding the user and cart buttons.

Solutions Provided:

Two support team members offered CSS-based fixes:

  • One suggested adding custom CSS through Shopify’s theme customizer (Theme settings > Custom CSS)
  • Another recommended inserting CSS code directly into the theme.liquid file before the </head> tag

Additional Issue:

The user also mentioned text below their banner was breaking mid-word across lines, though this wasn’t directly addressed in the responses.

Outcome:

The issue was resolved successfully. The user initially encountered a publishing error (“Online Store editor session can’t be published”) but ultimately confirmed one of the solutions worked.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Since I haven’t started selling anything on my website yet, my header only includes the menu, logo, and search button. On the mobile interface, the search button doesn’t appear in the correct order (I want it to be the menu on the left, the logo in the center, and the search button on the right).

Could anyone please tell me how to adjust the settings? I should mention that I’ve hidden (or maybe deleted) the user and cart buttons for now.

Additionally, the text below the banner doesn’t display as complete words—some words are strangely split across lines.

Could anyone tell me how to adjust this so that complete words appear on the same line?

Thank you very much!

www.allcanlabel.com

IMG_3914.jpg
IMG_3914.jpg1133×2216 185 KB

2

Hi @mimmyyum

Could you please share the store link and entry password so we can check it further?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

3

www.allcanlabel.com

4

@mimmyyum Thank you for sharing it

You can follow our instructions below:

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

Here is the code for Step 3:

@media screen and (max-width: 768px){
.header__icons.header__icons--localization.header-localization {
    padding-right: 0 !important;
.header__icons.header__icons--localization.header-localization > a#cart-icon-bubble {
    display: none !important;
}
}

image (59).png
image (59).png360×453 132 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

5

Hi @mimmyyum

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

1 Like
6

when saving the changes, it said “Online Store editor session can’t be published”, I have launched our website. So how can I save it in this circumstance? Thank you.

7

Thank you! It works :heart_eyes: