Theres a space below the header

Hi @msimplay!

Thank you for reaching out.

I understand that you’re seeing extra space below the header on your homepage when using the Storefront theme, while the rest of your store pages don’t have this spacing.

By default, Storefront doesn’t include a built-in option to remove this space. However, you can remove it by adding the following CSS under Appearance → Customize → Additional CSS:

.home.page-template-template-fullwidth header#masthead.site-header {
    margin-bottom: 0 !important;
}

After adding the CSS, save your changes and clear any site/server cache if you’re using a caching plugin to ensure the changes are reflected.

Please let us know if this resolves the issue or if you need any further assistance. We’re happy to help!

Hi there!

Thank you for the update.

I applied this code on my test site, and it is working correctly on my end. I also checked your site and noticed that the code I provided does not appear to be loading on the frontend.

To assist you further, could you please share a screenshot showing exactly where you added the code? You can use the following tool to upload and share the screenshot:

https://snipboard.io

Additionally, please try clearing your site cache and check if the issue is resolved.

Thank you!

Hi @msimplay!

I’m glad to hear it’s working now! Thanks for confirming. 😊

As for the spacing, it’s intentional in the Storefront theme. The bottom margin is part of the theme’s default styling to provide consistent spacing between the site navigation and the content below, helping to improve the overall layout across different page types. Depending on your site’s design, you may prefer a smaller margin or none at all, and overriding it with custom CSS is perfectly fine.

Please let us know if there’s anything else we can help with!