header alignment design

Itamar2020
Excursionist
48 0 3

can someone help me move this icon to the left please?

store url https://26e068.myshopify.com/

 

WhatsApp Image 2024-01-24 at 21.06.19.jpeg

Reply 1 (1)

BSS-Commerce
Shopify Expert
3380 447 498

Hi @Itamar2020 ,

If you're just editing the CSS, I can edit it for you to look like this:

view - 2024-01-26T142758.979.png

To get the above result, you need to change the order attribute of the subclasses in the parent class, header. The order attribute allows displaying the order of subclasses wrapped in the parent class when display = flex.

Similarly, change the order property of the cart class so that the cart icon moves to the left of the search icon.

You can do this in admin.shopify: 

Sale channels => Online store => Theme => Edit code. Search base.css and insert the css at the end of the file:

@media only screen and (max-width: 768px) {
    .header {
        display: flex !important;
        justify-content: space-between !important;
    }

    .header header-drawer {
        order: 3;
    }

    .header .header__heading {
        order: 2;
    }

    .header .header__icon.header__icon--cart {
        order: -1;
    }
}

As for doing it exactly as you requested, changing the liquid file will be easier.  But I don't have access to your store to do that. You can contact your supporter or hire a developer to customize that.

Hope it helps.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development