How can I reposition my mobile header icons to the left?

Store Design

Topic summary

A user seeks help repositioning mobile header icons from center to left alignment on their Shopify store.

Initial Suggestions:

  • Edit header.liquid file in theme code
  • Add CSS targeting .header__icons with display: flex and justify-content: flex-start

Problem:
The initial CSS solution didn’t work for the user’s specific setup.

Working Solution:
Another contributor provided targeted CSS for the .mini-cart-icon and .header-search-1 .search-icon classes using:

  • Absolute positioning with specific pixel values
  • Media query for screens max-width 425px
  • Important flags to override existing styles

Outcome:
The issue was resolved. The user confirmed the absolute positioning approach worked and expressed gratitude for the assistance.

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

Hi, my header icons on mobile are in the middle and im trying to snap them to the left.

If someone can help me with the code I will be very gratefull.

Thank you.

berez.org.il

password: malul

Screenshot (1).png
Screenshot (1).png485×776 241 KB

2

Hello @malul ,

You can try these steps:

  • Go to Online Stores → Themes → Actions → Edit code
  • Go to sections → header.liquid file
  • Look for the code that outputs the icons you want to align to the left side. This code could look something like this:

  
    
    {{ 'layout.cart.title' | t }}
  
  
    
    {{ 'customer.account.navigation.label' | t }}
  • Add the following CSS code just before the closing tag:
.header__icons {
  display: flex;
  justify-content: flex-start;
}
  • Save and preview.

Hope this can help you out.

Ali Reviews team.

1 Like
3

Hi thank you but it didnt work.

The css of the Cart icon is this, do you see a change should be done?

.mini-cart-icon {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 30px;
cursor: pointer;
color: var(--ltn__heading-color); }
4

@malul add below css into style .css file

@media (max-width:425px)
{
.mini-cart-icon {
    position: absolute !important;
    top: 35px !important;
    left: 45px !important;
}
.header-search-1 .search-icon {
    min-width: 25px !important;
    text-align: center !important;
    font-size: 16px !important;
    position: absolute !important;
    top: -53px !important;
    left: -224px !important;
}
}

Ujjaval_0-1681469981136.png
Ujjaval_0-1681469981136.png422×606 157 KB

5

@Ujjaval

thank you very much, appriciate your time.