How To Readjust Header Height? Kingdom Theme

Solved
MerrittWatson
Tourist
14 0 2

Is there any way to adjust the height of the header. Im using the Kingdom theme.

I have a "Featured Collection" at the top of my home page but it sits quite well below the top of the page, with a significant gap. Is there any way to minimise this gap?

 

www.chocblocs.co.nz

Password: P@ssw0rd!

 

Before

Screenshot 2022-04-28 at 9.36.23 PM.png

 

What i am aiming for:

Screenshot 2022-04-28 at 9.36.34 PM.png

 

Anyone have a fix?

Accepted Solutions (2)

Accepted Solutions
Mr_RaviRaj
Shopify Partner
262 32 42

This is an accepted solution.

@MerrittWatson 
Welcome to Shopify Community.
Kindly Add this code in the bottom of the theme.css or base.css file.

.without-gutter+.with-gutter:not(.has-inner-padding), #page-content .with-gutter:first-child, .has-inner-padding+.with-gutter {
    margin-top: 0px !important;
}

Thank you

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: raviraj@zworthkey.com
,We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages

View solution in original post

oscprofessional
Shopify Partner
10942 1749 2219

This is an accepted solution.

@MerrittWatson ,

.without-gutter+.with-gutter:not(.has-inner-padding), #page-content .with-gutter:first-child, .has-inner-padding+.with-gutter {
    margin-top: 0;
}.featured-collection__header.rte {
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 6 (6)
oscprofessional
Shopify Partner
10942 1749 2219

@MerrittWatson ,

Welcome to the Shopify Community! Please share your store URL, so that I can check your issue and will back to you with a proper solution. Have a Good Day!....

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
MerrittWatson
Tourist
14 0 2
MerrittWatson
Tourist
14 0 2
Mr_RaviRaj
Shopify Partner
262 32 42

This is an accepted solution.

@MerrittWatson 
Welcome to Shopify Community.
Kindly Add this code in the bottom of the theme.css or base.css file.

.without-gutter+.with-gutter:not(.has-inner-padding), #page-content .with-gutter:first-child, .has-inner-padding+.with-gutter {
    margin-top: 0px !important;
}

Thank you

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: raviraj@zworthkey.com
,We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
oscprofessional
Shopify Partner
10942 1749 2219

This is an accepted solution.

@MerrittWatson ,

.without-gutter+.with-gutter:not(.has-inner-padding), #page-content .with-gutter:first-child, .has-inner-padding+.with-gutter {
    margin-top: 0;
}.featured-collection__header.rte {
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
MerrittWatson
Tourist
14 0 2

You guys are amazing, thank you!