Debut theme - change size image logo and keep it centered

Highlighted
Tourist
5 0 1

Hi everyone,

I have resized my image logo in the header using the following css:

.site-header__logo img {
width: 540px!important;
max-width: 540px!important;
display: block;
margin-left: auto;
margin-right: auto;
}

However it has resized it from the top left corner and it is not centered anymore. I tried changing the margins on several .class but I can't find the right one. 

I also need to adjust the top and bottom margins.

https://le-comptoir-thes-cafes-cie.myshopify.com
pass: password

Thanks for your help!

0 Likes
Highlighted
Tourist
5 0 1

Is anyone able to help? It seems like there is a simple answer but I can't find it on other threads of the forum - thanks!

0 Likes
Highlighted
Shopify Partner
55 9 11

Hi @Pppppppppaul 
As far as I can see, It is totally centered, only issue is with your image, Your logo image have text and white spacing around it, that is not proper, that's why its not looking center

https://cdn.shopify.com/s/files/1/0401/8343/1325/files/logo_300x300.jpg?v=1593783022

check this image. 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted

Hello @Pppppppppaul 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (min-width: 749px) {
.site-header.logo--center .site-header__mobile-nav {
	width: 100%;
	display: block;
}
.grid__item.logo-align--center {
	position: static;
}
.logo-align--center .site-header__logo {
	text-align: center;
}
}
@media screen and (min-width: 640px) {
.grid__item.logo-align--center {
	position: static;
	float: left;
}
.grid__item.site-header__icons {
	float: none;
	display: table;
	text-align: center !important;
	margin: 0 auto;
	padding: 0;
}
.site-header.logo--center .site-header__logo img {
	width: 100% !important;
	max-width: 400px !important;
}
.logo-align--center .site-header__logo {
	margin: 5px 0;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 1

Hi @oscprofessional 

Thanks!

I've changed

@media screen and (min-width: 640px) {
.grid__item.logo-align--center {
	position: static;
	float: center;

 

My only issue is that the icons are not aligned with the logo image - what would I need to change to have them on the same line? Thanks! 

0 Likes