Solved

Announcement bar height - Shopify Debut

hakamount
Explorer
85 1 18

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

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

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




◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 12 (12)

Diamond_Team
Shopify Partner
112 14 24

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.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
AdnanHassan
Visitor
1 0 0

Thanks for help. Working fine

dmwwebartisan
Shopify Partner
12282 2546 3694

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 | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

diego_ezfy
Shopify Partner
2935 562 883

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




◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

hakamount
Explorer
85 1 18

Diego - thank you, this solution worked great.

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

MarcusRochna
Visitor
1 0 0

Diego,

 

Great piece of code. The first part for desktop worked for me but the second part does not edit the mobile version ?

ChristinasUBLLC
Visitor
2 0 1

Hi,

 

I do not have that asset listed.  could the announcement bar be titled something else?

 

ACOFFICIAL
New Member
9 0 0

Hi Diego, I am using the Dawn theme and it doesnt appear to have a theme.css.liquid file - do you have a solution for this theme also?

sirensiren
Excursionist
41 0 8

Hi! I am using the same theme! Copy and paste the code at the bottom of the base.css file! It will do the trick! 

BestX
Visitor
2 0 0

Screen Shot 2020-10-23 at 11.27.20 am.png

Hi, I need to remove the top one with red bar, please assist. thanks

diego_ezfy
Shopify Partner
2935 562 883

@BestX Please create a new question for the sake of organization, people will be able to assist you faster like this.

Thank you

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

BestX
Visitor
2 0 0

New to community, when posting new questions do I have to attention someone? thanks