Align store LOGO to Right Side in (Mobile View)

[ArnauP]

I want to move the Logo Store in to the Right Side and move the Hamburger Icon of the menu in the left (Only in Mobile)

I have this:

I want to see like this:

 

Thanks You!

https://jaccomcollection.com/

[theycallmemakka · Accepted solution]

Hi @ArnauP ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>

@media screen and (max-width: 989px) {
    .header--mobile-left {
        grid-template-columns: auto 3fr 1fr;
    }
    .header {
    grid-template-areas: ' heading icons left-icons';
}

header-drawer {
    margin-left: 0px;
    justify-self: end;
}

.header__icons {
    padding: 0px;
}
    .menu-drawer {
    transform: translate(100%);
}
}


</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[theycallmemakka · Accepted solution]

Hi @ArnauP ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>

@media screen and (max-width: 989px) {
    .header--mobile-left {
        grid-template-columns: auto 3fr 1fr;
    }
    .header {
    grid-template-areas: ' heading icons left-icons';
}

header-drawer {
    margin-left: 0px;
    justify-self: end;
}

.header__icons {
    padding: 0px;
}
    .menu-drawer {
    transform: translate(100%);
}
}


</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Made4uo-Ribe · Accepted solution]

Hi @ArnauP 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.header {
    display: grid;
    grid-template-areas: 'heading icons left-icons';
    grid-template-columns: 1fr auto;
    align-items: center;
}
header-drawer {
    padding-left: 10px;
}
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!