How do I align icons correctly in CSS without them moving together?

Store Design
,

Topic summary

A user is experiencing CSS alignment issues with search and cart icons in their Shopify theme. When attempting to edit CSS to move the search icon, both icons move together instead of independently.

Problem Details:

  • Icons are not properly aligned with each other
  • Editing one icon’s position affects the other
  • Screenshots show the misalignment issue

Proposed Solution:
A PageFly representative provided step-by-step instructions:

  1. Navigate to Online Stores > Themes > More Actions > Edit code
  2. Open theme.liquid file
  3. Add custom CSS code above the </head> tag

Status: The solution has been offered but confirmation of resolution is unclear. One responder initially thought the issue was resolved, but the user clarified the alignment problem persists.

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

niceeee_0-1681797877284.png
niceeee_0-1681797877284.png729×271 15.4 KB

should align with cart icon

when I try to edit the css both search icon move at the same time.

2

Hey @niceeee
I think you already resolved your issue?

Capture.JPG

3

but this one is not alligned

niceeee_0-1681800570363.png
niceeee_0-1681800570363.png603×346 15.6 KB

4

Hi @niceeee

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1681868760368.png
PageFlyRichard_0-1681868760368.png390×844 107 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly