Changing Text Color And Size in Announcement Bar in Minimal Theme - I Found Code That Works, BUT

Store Design
1

I figured out how to change the announcement bar message text size & color etc. in regular Computer View in the Minimal Theme. I just used this code:

.header-bar__message {
font-size: 22px !important;
color: #FFFFFF !important;
}

However, it didn’t affect it in MOBILE VIEW.

I figured out I can use THIS code for Mobile View, and it Works:

.header-bar {
font-size: 22px !important;
color: #FFFFFF !important;
}

Also, I have also seen people use THIS code:

.header-bar__module {
font-size: 22px !important;
color: #FFFFFF !important;
}

So it appears that the following is the case:

.header-bar__message is for COMPUTER VIEW Only ???

.header-bar is for MOBILE VIEW Only ???

So then what is THIS For:

.header-bar__module

What on earth is THAT one for?

***EDIT: I also figured out that .header-bar is NOT just for MOBILE VIEW :slightly_smiling_face:

What code do I use to edit the announcement bar text SEPARATELY For COMPUTER View AND MOBILE View ???

Like I want two separated blocks of code, one for COMPUTER View, And one for MOBILE View

Is this Possible?

1 Like
2

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

3

Hi @Beyblade-Gamer ,

Please add code:

.announcement-bar--mobile {
	font-size: 22px !important;
    color: #FFFFFF !important;
}

It will help you change for mobile.

4

That worked perfectly. Thank you!

1 Like
5

Also, does anyone happen to know what THIS particular code option is for:

.header-bar__module

What exactly does that affect???

6

Hi @Beyblade-Gamer ,

This code helps to change font size and background at desktop. Refer:

Screenshot.png
Screenshot.png1585×340 112 KB

Hope it is clear to you.

7

OK, Thanks!

1 Like