Reduce height of header and announcement bar impact theme

[noosathletics]

Hi all,

I'm trying to reduce my announcement bar and header height so that my product page is better visible. This is what it currently looks like:

This is what I'm trying to achieve:

Also, I would like to reduce the spacing between sections. Could someone assist me on this as well?

website: www.noosathletics.com

Theme: impact

Thanks!

 

[Moeed]

Hey @noosathletics 

Follow these Steps:

1) Go to Online Store
2) Edit Code

3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.announcement-bar.bg-custom.text-custom {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[noosathletics]

Hi Moeed, 

It did answer the first part of my question. Could you also help me with the second: 

Also, I would like to reduce the spacing between sections. Could someone assist me on this as well?

Thank you!

[Moeed · Accepted solution]

Hey @noosathletics 

Keep the previous code and add this new code above </style> in the end of theme.liquid file

.product-info>*+* {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[noosathletics]

Definitely! Thanks man!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.