Reduce header space and announcement bar height

[Paul_Steenbrugg]

Dear community,

I am dealing with the following issues;

1. I would like to reduce the height of my announcement bar - some space can be saved (marked in red)

2. The white space of my header must also be reduced (marked in red)

Theme: Dawn

Website: www.stahlweinregal.de

Any help is much appreciated 🙂

[mt686 · Accepted solution]

Hi, nice page!

Below is a code snipped that'll work. I've set the padding to 0 on each. If you want more space, just add a higher number before 'px' on each. Here you go: 

{% style %}
/* THIS IS THE ANNOUNCEMENT BAR CODE*/
p.announcement-bar__message.h5 {
    padding-bottom: 0px;
    padding-top: 0px;
}

/* THIS IS THE HEADER CODE*/
header.header.header--middle-left.page-width.header--has-menu {
    padding-top: 0px;
    padding-bottom: 0px;
}
{% endstyle %}

Insert that into your theme.liquid file (online store > themes > click '...' on the theme you want, then 'edit code'). Insert it at the bottom of the file, right before the '</body>' tag. 

Alternatively, you can also use the app Easy Edits to make the edit yourself without touching any code, just click on the sections and set the padding to 0. You can make the edit and delete the app without paying for anything, and keep the edits. 

Fair disclaimer, Easy Edits is an app I've worked on. If you need any help inserting the code or using the app, just let me know!

[Paul_Steenbrugg]

Hello Mt686!

That did the job - awesome!

Now when "landing" on the page, the customer will immediately see the "buy now" button, most likely this also will help the conversion.

Thank you for this great solution!

Have a nice day,

Paul

[itzperry96]

Hey so i'm trying to make my announcement bar thinner than my header section and ive pasted your code. however it actually made my announcement bar wider. Can you help me?