Re: Reduce header space and announcement bar height

Solved

Reduce header space and announcement bar height

Paul_Steenbrugg
New Member
16 0 0

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)

announcement bar.PNG

 

 

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

announcement bar 2.PNG

Theme: Dawn

Website: www.stahlweinregal.de

 

Any help is much appreciated 🙂

Accepted Solution (1)

mt686
Shopify Partner
56 9 19

This is an 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!

View solution in original post

Replies 3 (3)

mt686
Shopify Partner
56 9 19

This is an 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
New Member
16 0 0

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
New Member
8 0 0

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?