How can I align custom cart and search icons in my header?

Store Design
, ,

Topic summary

A user is experiencing a vertical alignment issue where their custom cart icon sits slightly below the search icon in their website header.

Responses provided:

  • Multiple developers requested the store URL to diagnose the problem
  • The user shared their site: wintheory.com

Proposed solutions:

Two CSS fixes were offered:

  1. Transform approach: Add transform: translateY(-2px); to the #cart-icon-bubble selector

  2. Flexbox approach: Apply align-items: flex-start !important; to .header-localization:not(.menu-drawer__localization)

Both solutions should be added to either the custom CSS file or a custom code section in the theme settings. The issue remains open as the user hasn’t confirmed which solution worked.

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

My cart icon is slightly below my search icon in the header. Can I fix this? They are both custom icons.

Image 24-01-2024 at 09.35.jpeg
Image 24-01-2024 at 09.35.jpeg328×114 2.22 KB

2

Hi EhanOSHOP,

Please share your website Url so i make the changings

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

Hello @EthanOSHOP
can you share store URL?

5

the URL is wintheoryco.com

6

wintheoryco.com

7

Hey @EthanOSHOP ,

Add this to your CSS

#cart-icon-bubble {
  transform: translateY(-2px);
}
1 Like
8 
.header-localization:not(.menu-drawer__localization) {
    align-items: flex-start !important;
}

try to paste this code in your css file or in custom code section.in theme setting

1 Like