Solved

How can I fix the announcement bar issue on my ecommerce store?

HHloot
Excursionist
20 0 4

Hello,

I have a problem with the announcement bar of my shopify store.

HHloot_0-1703868117516.png

I wanted at first to have an announcement bar with a black background and a white writing, however as you can see it on the picture above there is only a thin line that is black and not the whole background. On mobile it's even worse since not only the whole background of the announcement bar isn't completely black, but the writing isn't centralized in the annoucement bar and exceeds on the video : 

HHloot_1-1703868340804.png

As you know this doesn't look very professional and may scare the clients away. If maybe someone could help me put the white writing on the black background,and get the wirting centralized in the phone view, i would be very thankful.

Here is my shopify store link : https://blenderpure.com/

Let me know if you need anymore information.

Many thanks to anyone who will provide with any type of help.

 

Best reguards.

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6035 1448 1785

This is an accepted solution.

Hi @HHloot 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.utility-bar {
    height: unset;
}
.announcement-bar * {
    color: white !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1703880953072.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 3 (3)

PaulNewton
Shopify Partner
6339 579 1345

Hello @HHloot it's because the bar needs to let the height be automatic , or given more height as a rule.

.announcement-bar-section {
    height: 30px;
}
.announcement-bar__message {
 color: white;
}

 

Then there's an additional whitespace gap caused by the next section having a margin from somewhere that would need to be fixed or overridden.

.section-header {
    margin-bottom: 0px;
}

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Made4uo-Ribe
Shopify Partner
6035 1448 1785

This is an accepted solution.

Hi @HHloot 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.utility-bar {
    height: unset;
}
.announcement-bar * {
    color: white !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1703880953072.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


HHloot
Excursionist
20 0 4

It worked ! Thank you so much for your time and help !