A user needed to change the Dawn theme’s utility/announcement bar to black with white text, as adjusting scheme colors wasn’t working.
Solutions Provided:
Two community members offered CSS code solutions:
base.css file.utility-bar__grid.utility-bar__grid--3-col with background: black !important and appropriate text color stylingOutcome:
The issue was resolved — the user confirmed the CSS solution worked successfully. The discussion included screenshots showing the before state and the custom CSS section being modified.
Hi, I need help with changing the utility bar/announcement bar color to black with white text. I tried adjusting the scheme colors but nothing seems to be happening.
Is there a way I can change the whole strip to black?
Currently, this is what’s in my announcement bar’s custom css section:
Hello @kay_png
Please share the store link.
Hi @kay_png
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.page-width.utility-bar__grid.utility-bar__grid–3-col {
background: black !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hello @kay_png
Add the below CSS in base.css file.
body .utility-bar__grid.utility-bar__grid--3-col {
background: #000;
}
OUTPUT:
Thanks
It worked! Thank you!
It worked! Thank you!
