Announcement bar height - Shopify Debut

Solved
Highlighted
Explorer
69 1 11

Hi All

I would like to make the announcement bar height smaller - at the moment it is too big for my style.

Is it possible to do this?

Site = www.hakamount.co.uk pass = ceesti

Cheers

haka

0 Likes
Highlighted
Explorer
15 1 3

Hello Haka,

From your theme dashboard choose edit code from theme actions.

Scroll down to assets folder, choose 

theme.scss.liquid

Press ctrl + f and , then put this text to search it:

.announcement-bar__message

then replace 2 with 4

this should reduce your announcement-bar height 

ann.PNG

If the answer was helpful for you, then please Like and Accept the Solution.
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
Get our new boundless theme product page template from here
0 Likes
Highlighted
Shopify Partner
2282 498 647

Hey @hakamount,

Your Announcement bar height is perfect. Because header and announcement bar colors are the same therefore it looks like hight is high.

please add the following code at the bottom of your assets/theme.scss.liquid file.

.announcement-bar {
    border-bottom: 1px solid white;
}

This will put a separator link between announcement bar and header.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Astronaut
1083 178 213

This is an accepted solution.

@hakamount I developed some code for you to fix it in 20 seconds & also have full control:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

 

.announcement-bar__message {
    padding: 5px 0 !important;
    font-size: 12px !important;

}

@media (max-width: 767px){
   .announcement-bar__message {
    font-size: 10px !important;

} 
}

 

 



12px = font size of the announcement text on desktop/large devices.
10px = font size of the announcement text on mobile/smaller devices.

You can customize to your liking. 

Let me know if it works for you, I'll be happy to assist further if you need.

Kind regards,
Diego




◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Explorer
69 1 11

Diego - thank you, this solution worked great.

Thank you to others who also contributed, it is appreciated.

0 Likes