Center logo in DEBUT Theme - v2021

Solved
MRami
Tourist
14 0 4

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

0 Likes
Pallavi
Shopify Expert
1269 174 209

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MRami
Tourist
14 0 4

Hi Pallavi!

the link to my store is: https://ston-skin.myshopify.com/ with PW: eanien

Here a screenshot:

MRami_0-1619507406805.png

 

I want to put the logo in the center with the menu on the left (aligned to the left).

 

Thanks!

Pallavi
Shopify Expert
1269 174 209

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MRami
Tourist
14 0 4

Thanks Pallavi! 

This works perfectly. 

Cheers

Pallavi
Shopify Expert
1269 174 209

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes