Liquid, JavaScript, themes, sales channels
Hi Everyone,
I would like to center the logo in the debut theme and put the menu items on the left. The posts that I found on here dating back to 2019 don't work anymore.
Can anyone help?
Thanks,
M
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
.site-header .site-header__mobile-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.site-header .site-header__mobile-nav .grid__item.logo-align--left {
order: 1;
width: 50%;
}
.site-header .site-header__mobile-nav .grid__item {
order: 0;
width: 25%;
}
.site-header .site-header__mobile-nav .grid__item.site-header__icons {
order: 2;
}
.site-header .site-header__mobile-nav .grid__item .site-nav {
text-align: left;
}
.site-header .site-header__mobile-nav .grid__item.logo-align--left .site-header__logo a {
display: flex;
align-items: center;
justify-content: center;
}
}
Screenshot :- https://prnt.sc/124sl91
Hello There,
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.
Hi Pallavi!
the link to my store is: https://ston-skin.myshopify.com/ with PW: eanien
Here a screenshot:
I want to put the logo in the center with the menu on the left (aligned to the left).
Thanks!
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
.site-header .site-header__mobile-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.site-header .site-header__mobile-nav .grid__item.logo-align--left {
order: 1;
width: 50%;
}
.site-header .site-header__mobile-nav .grid__item {
order: 0;
width: 25%;
}
.site-header .site-header__mobile-nav .grid__item.site-header__icons {
order: 2;
}
.site-header .site-header__mobile-nav .grid__item .site-nav {
text-align: left;
}
.site-header .site-header__mobile-nav .grid__item.logo-align--left .site-header__logo a {
display: flex;
align-items: center;
justify-content: center;
}
}
Screenshot :- https://prnt.sc/124sl91
Thanks Pallavi!
This works perfectly.
Cheers
Kindly feel free to get back to me if you need any further assistance Thanks!
Hello I was wondering this works perfectly on desktop, bu I was wondering would I be able to put the logo in the center on mobile as well?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024