How To Change Font Size Of Announcement Bar Text?

[mbbrennan]

I would to increase the font size of my announcement bar, but I can't seem to find where to do that. I've read through the previous threads on this issue, but can't locate the styles.css anywhere.

Thanks in advance.

raeofsunshinebnm.com

[PageFly-Victor]

Hi @mbbrennan ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
.header-bar__module.header-bar__message {
    font-size: 20px;
}
</style>

Note: You can change value to fit your store

Hope my answer will help you.

Best regards,

Victor | PageFly

[naturebymk]

I'd like to report that I entered this code into my theme.liquid before </body> and no change occured. I tested 20px and 10px and no change.

[Made4uo-Ribe]

Hi @mbbrennan ,

I understand that you want to increase the font size of my announcement bar.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "theme.scss.liquid" or "styles.scss.liquid" file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
4. At the bottom of the file, add the following CSS code:

.header-bar {
    font-size: medium;
}

• You can also change any size you want. 
• Result.
• 
• I hope it help.

[oscprofessional]

Hello @mbbrennan 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.header-bar {
    font-size: 18px !important;
}

[websensepro]

Hi @mbbrennan 

1. Go to the online store 

2. Edit the code and base.css file below paste the code 

.header-bar__module.header-bar__message {

 font-size: 20px;

}