Remove padding around logo in header.

Highlighted
New Member
7 0 0

I'm using the debut theme. 

What i want to do is remove the padding around the logo in the header. When i make the logo bigger the header goes bigger too, which is fine but their is white space above and below the header. How can i remove the padding (white space) so that when i make the logo bigger it touches the sides of the header before the header gets bigger. 

 

I have already tried: 

.site-header__logo-image {
padding: 0px
}

but that didn't seem to remove the white space. When i inspect the page their isn't any padding but the logo doesn't touch the sides of the header so their must be something stopping it. Does anyone know?

 

Thanks for your time, Alfie

0 Likes
Highlighted

@Alfieh,

Can you please share your site url

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

The website isn't finished yet. Could you maybe just point me in the right direction. The theme is Debut. 

0 Likes
Highlighted

Hello @Alfieh 


Add this css at the bottom of

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

.site-header h1.site-header__logo {
	margin: 0 !important;
	padding: 0 !important;
}

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

Hey @oscprofessional 

This worked thanks, however it only works on the home page. So when i'm on another page it puts the padding back. Do you know how to make it work on all pages?

Thanks again. 

0 Likes
Highlighted

Hello @Alfieh 

Greetings of the day...

Add this css at the bottom of

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

.site-header h1.site-header__logo {
	margin: 0 !important;
	padding: 0 !important;
}

This code is used for all pages related to logo spacing issue.

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

Hi @Alfieh 

Please use this code

.site-header__logo {
margin: 0 !important;
	padding: 0 !important;
}

in the bottom of this file theme.scss.liquid

I hope it will work.

I also have a guide here for personalizing Shopify page, you can check it if you have time. 

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes