How to remove login icon and align other icons to the right in mobile header?

[KimGottwald]

Hi everyone,

I’m trying to modify the header on the mobile version of my store. I’d like to remove the login icon and align the remaining icons to the right. I’ve attached images showing the current layout and what I’m aiming for.

Here’s the preview link to my store: https://ll4w4t6j24v2zyxo-86217654598.shopifypreview.com
Password: Password

Thanks in advance for your help!

Best,
Kim

 

[Moeed]

Hey @KimGottwald 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header:not(.header--has-menu) *>.header__search {
    display: block !important;
}
a.header__icon.header__icon--account.link.focus-inset {
    display: none !important;
}
.header>.header__search {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed