Remove gap between Slider and Menu

Solved

Hi all

 

I am just wondering if anyone know how I can reduce the white gap between the KLarna banner (which sits in my Slider.liquid html) and the menu?

 

gapklarnamenu.PNG

 

Thanks!

 

 

Introducing everyday urban clothing at northspoke.com
0 Likes
Shopify Partner
104 4 32

@oscarrmoore Hi!

Looking at the HTML, it seems it's the padding for the header tag, which probably sits in the header.liquid file. image.png

I'd look there first, detect the exact element that's causing the padding (probably the menu) and override its padding property to remove the padding. Note that originally the padding (where the right red arrow is) as 30px, and I've changed it to 0px to make it work. 

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
0 Likes
Shopify Partner
1141 92 139

Please Share a Store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
Shopify Expert
2486 416 523

Hi @oscarrmoore 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.site-header{ padding-bottom: 0;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Partner
104 4 32

@Jasoliya Isn't it the top padding there?

But that's exactly what I meant @oscarrmoore, you force it with an override.

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
0 Likes

Hi @KidOnPoint !

 

Thanks for your input! I have changed the padding to 0 however now it seems too close (I know I'm a pain!) - I've tried changing the 0 to another number, e.g 5, 10 etc but it doesn't make a difference - could you possibly advise?

 

Thanks in advance!

Introducing everyday urban clothing at northspoke.com
0 Likes

Hi @Jasoliya  !

 

Thanks for your input! I have changed the padding to 0 however now it seems too close (I know I'm a pain!) - I've tried changing the 0 to another number, e.g 5, 10 etc but it doesn't make a difference - could you possibly advise?

 

Thanks in advance!

Introducing everyday urban clothing at northspoke.com
0 Likes

Success.

Shopify Partner
104 4 32

@oscarrmoore If you were able to zero out the padding, you should be able to alter it to some other value.

Works from my end (but that's post-processing of the SCSS file @Jasoliya mentioned):

2019-12-22_13-57.png

Also note that what I changed is the top padding and not the bottom padding like @Jasoliya mentioned. You can try:

.site-header{ padding-top: 10px;}

And see what that gets you.

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
1 Like

Perfect - thank you so much!

Introducing everyday urban clothing at northspoke.com
0 Likes