FROM CACHE - en_header

Center logo in DEBUT Theme - v2021

Solved
MRami
Excursionist
18 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

Accepted Solution (1)

Accepted Solutions
ZestardTech
Shopify Expert
3604 594 836

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

View solution in original post

Replies 6 (6)
ZestardTech
Shopify Expert
3604 594 836

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
MRami
Excursionist
18 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!

ZestardTech
Shopify Expert
3604 594 836

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
MRami
Excursionist
18 0 4

Thanks Pallavi! 

This works perfectly. 

Cheers

ZestardTech
Shopify Expert
3604 594 836

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
User321
New Member
2 0 0

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?