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

[HHloot]

Hello,

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

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 :

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.

[PaulNewton]

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

[Made4uo-Ribe]

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:

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

[HHloot]

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