How To Change Font Size Of Announcement Bar Text?

mbbrennan
Visitor
3 0 1

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

Replies 5 (5)

PageFly-Victor
Shopify Partner
7865 1785 3071

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
Visitor
1 0 0

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
Shopify Partner
6419 1539 1909

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.
  • Rose_Dim_0-1682972196207.png
  • I hope it help.
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

oscprofessional
Shopify Partner
15905 2378 3087

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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

websensepro
Shopify Partner
1047 146 153

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;
}
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here