Solved

Brooklyn Theme - Header Spacing/Padding

jessmylife
Visitor
2 0 2

Hi there! I am trying to figure out how to remove the large amounts of padding between the menu and the looping video and then the header underneath on my home page. I also do not like how much room there is between the header and first section of any of my pages (example: the About Me page). Is this a Heading/Header setting? There are larger amounts of space between most of my headers and body text. I have tried a couple fixes from other discussion forums but none have worked so far so I don't think I was placing the right code in the right section. Thanks in advance for your help!

Website: https://jessmylife.com

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

Hello, @jessmylife 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 54 (54)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

Hello, @jessmylife 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jessmylife
Visitor
2 0 2

That worked - thank you very much!

KetanKumar
Shopify Partner
36839 3635 11972

@jessmylife 

Thanks for update and your compliment.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cen9izh4n
Tourist
6 0 2

Hi

 

I have similar problem. I wanted to change the mega menu structure with the globo mega menu app. I unpublish and removed it because the app's dimensions do not fit. Later, the old menu structure was broken. All the menu components started to come to the homepage vertically.

It normally included main topics and submenus horizontally. After it broken, all header / items started to come up vertically.

Could anyone help me?

Thanks

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @cen9izh4n 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cen9izh4n
Tourist
6 0 2

Hi @KetanKumar ,

 

Thx for your interest. I solved the problem.

 

Have a nice day

KetanKumar
Shopify Partner
36839 3635 11972

@cen9izh4n 

Thanks for update.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

Hi @KetanKumar,

I'm very new here! I can see that you pretty much know everything about Shopify! Help!!😇

I'm not having any luck with resolving these problems I have with Brooklyn theme:

  • reducing padding around rich-text
  • reducing padding around featured sections/slide shows etc
  • reducing the space around the header
  • enlarging the size of the logo for a mobile device and web as it is so small (logo dimensions(px) are: 900x200)
  • images fitting the slideshows and not being cropped. (images are 1000x1000px)

Thank you in advance!

Kind regards

brad

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @mytwoheads 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

Thanks - Can I send you link and password privately, please?

 

mytwoheads
Excursionist
16 0 4

I've sent you an email with details of URL and password.

Happy for you to share the solutions here, just not the URL or password.

 

Thanks

Brad 🙏🏼🙏🏼🙏🏼

mytwoheads
Excursionist
16 0 4

Hi Ketan,

 

You got my email with URL and login details

Any help with those would be very helpful.

 

Thank you

Brad

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

Thankk can you please send test email all details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4
mytwoheads
Excursionist
16 0 4

Hi,

Also,

Product images are not aligning with their colour variation

Too much white padding on the home page above and beneath sections

Newsletter section is far to big in height

Appreciate your help Ketan 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

Thanks for the details

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.newsletter {
    padding: 30px 0;
}
.newsletter .section-header+.section-subheading {
margin-bottom: 10px;
}
.index-sections .shopify-section {
    margin-top: 30px;
}
.section-header {
    margin-bottom: 20px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

Hi Ketan,

 

The on the product pages the Product images are not aligning with their colour variation choices

This has been resolved, thank you: Too much white padding on the home page above and beneath sections

Newsletter section now has no space between the header and the subtext (See below picture with text problem)

Screen Shot 2020-10-23 at 15.47.09.png

The logo changes position and I lose the main menu (See pictures below). Also, the logo in the mobile view is so small it can hardly be seen.

I'd like the logo to be on the left and full main menu available, I'de also like the mobile logo bigger - but I can't seem to find the code to get those done!!

Screen Shot 2020-10-23 at 15.49.00.pngScreen Shot 2020-10-23 at 15.49.21.pngScreen Shot 2020-10-23 at 15.49.54.png

Appreciate your help Ketan

mytwoheads
Excursionist
16 0 4

Hi Ketan,

 

I'm confused!!!

Did you see my last message regarding the logo and things?

I've sent you an email and haven't heard anything.

 

Thanks

Brad

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

sorry for this

KetanKumar_0-1603768235921.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

Hi Ketan,

 

In addition to my other problems.

I'm also having a problem with images not resizing for the home page slideshows and on collection pages, the featured image is only showing half the image and when scrolling down it cuts off the image. I'd like for the whole featured image to show on the Collection pages.

 

Thanks

Brad

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

Thanks if you have more pleas send PM Details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

So I have to send you those same things in a PM?

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

Yes, please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mytwoheads
Excursionist
16 0 4

Hey Ketan, 🙂

I hope you're well?

See private message

Thank you for your help and support.

Kind regards,

Brad 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@mytwoheads 

Thanks i will check and let you know.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
brianhorace
Tourist
3 0 2

Jess, could you possibly explain how you got a video header to actually work? I want a similar thing but cant figure out how. I'm using the brooklyn theme.

KetanKumar
Shopify Partner
36839 3635 11972

@brianhorace 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
brianhorace
Tourist
3 0 2

https://3commtest.myshopify.com/ is the site url, this is the effect I am trying to accomplish https://3ctest.dreamhosters.com/.

KetanKumar
Shopify Partner
36839 3635 11972

@brianhorace 

Thanks for the details.

sorry but your store is password protect can you please share us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
joaodias1
Tourist
4 0 1

@KetanKumar i need your help with something. Can you send me a message?

 

KetanKumar
Shopify Partner
36839 3635 11972

@joaodias1 

Thanks for is

yes, how can i help you?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EeJin
Excursionist
24 0 4

@KetanKumar 

I tried using the code to reduce the large amount of spacing, but this does not work

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}

 

Is there a solution to reduce the amount of spacing between my menu and title, and tile and my pictures?

 

Spacing around title.PNG

Thanks

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @EeJin 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EeJin
Excursionist
24 0 4

It's www.ciirc.fit

Thanks @KetanKumar !

 

EeJin
Excursionist
24 0 4

Hi,

My shop is password protected since it is not live yet. I have sent you an email for this.

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @EeJin 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.template-collection .section-header {
    margin-bottom: 10px;
}
.template-collection main.main-content {
    padding-top: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EeJin
Excursionist
24 0 4

Hi,

@KetanKumar Thank you for the response! The solution works fine

Sheenamonique
Tourist
10 0 1

Hi @KetanKumar,

Will you please help me? I have a couple of banners on my page and I'd like to move the slideshow (image) down so that the logo is not right on top of my head. Any feedback for a solution would be great! My website is www.sheenamonique.com

 

Thank you for all of your help in the Shopify Community!

 

Sheena

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @Sheenamonique 

Welcome to the Shopify community!
and Thanks for your Good question.

how can i help you can you please share us an image of what do you want exctaly? 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sheenamonique
Tourist
10 0 1

Thanks for responding @KetanKumar! I'd like to add some padding so that the logo is not on top of my forehead. 

 

Screen Shot 2020-11-27 at 3.49.07 AM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Sheenamonique 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-width: 769px) {
.site-header__logo {padding-left: 175px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sheenamonique
Tourist
10 0 1

Thank you @KetanKumar  for that solution which worked on the desktop but on the mobile it still is showing over my face. I'd like to make sure that it applies to mobile and desktop.

KetanKumar
Shopify Partner
36839 3635 11972

@Sheenamonique 

yes, please.

@media screen and (max-width: 768px) {
.site-header__logo img {
    left: 88px;
    position: relative;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
apersaud06
Visitor
2 0 1

@KetanKumar Hi Ketan, I am having the same issue with my website. Too much padding/white space between sections. I am having this issue on my homepage and am using the Prestige theme. I sent you a message would it be possible for you to help me out? Thank you in advance!

KetanKumar
Shopify Partner
36839 3635 11972

@apersaud06 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kym44
Visitor
2 0 0

Thanks so much for this fix @- it worked for me 🙂

Can you please provide the same assistance for reducing the space between the header and the product title / product image on the product page itself?  I find there is too much white space there... thanks!

 

Screenshot 2021-03-08 at 9.35.31 pm.png

KetanKumar
Shopify Partner
36839 3635 11972

@Kym44 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kym44
Visitor
2 0 0

Sure thing!  It's still very early in development but it is here : https://pupette-pet-outfitters.myshopify.com/ 

 

Thank you 🙂 

ootdnewyork10
Excursionist
19 0 8

Hi @KetanKumar 

Could you please help me reduce some margins on the homepage as well please? 

Attached screenshot is homepage of my website in mobile version (Brooklyn). I would like to remove the margins around the product image ONLY IN MOBILE VERSION (not desktop) so that the image takes up more space while margins are reduced to minimal. How should I go about to achieve this? 

I'm using Brooklyn theme and my website url is www.ootdnewyork10.com

IMG_365A86A032D3-1.jpeg

 

Please let me know if you need any further information. Thanks in advnace!