How can I move the menu to the left to be side by side with the Logo?

[kingdom2]

Hi there!

How can I move the menu to the left to be side by side with the Logo?

https://kingdompetshop.com/collections/dog-collars-leashes

Theme: Refresh

Pw: abcd

[Nik1980]

Hi, the easiest way to change the logo location is to use the settings as shown in the print screen

[kingdom2]

Thanks for your answer.

I was playing before with that option, what happens is that if I select left, everything (logo+menu) goes to the left if I put center, everything goes to the center, they are coupled. 

How can I decouple the logo from the menu? 

[Made4uo-Ribe]

Hi @kingdom2 

Do you mean like this? 

If it is check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 990px) {
    .header--top-center {
        grid-template-areas:
        "left-icons navigation heading icons";
    }
    .header {
        grid-template-columns: auto 1fr auto 1fr;
    }
}
</style>

 And Save. 

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

[namphan]

Hi @kingdom2,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
    .header--top-center {
        grid-template-areas: "left-icons navigation heading icons";
        grid-template-columns: auto 1fr 1fr 1fr;
    }
.header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: 0;
    }
}

it will show like this:

[topnewyork · Accepted solution]

Hi @kingdom2 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

@media screen and (min-width: 990px) {
    .header--top-center {
        grid-template-areas: "left-icons navigation heading icons";
        grid-template-columns: auto 1fr 1fr 1fr;
    }
.header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: 0;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[kingdom2]

Thanks a lot @topnewyork !

I accepted the solution, the only detail is that the code goes at the bottom of base.css and not theme.liquid but for the rest amazing!

Thanks a lot!

[namphan]

Hi @kingdom2,

So it is 100% as I described 😊

Have you tried reading it?