Issue with white bar under header on one page

Technical Q&A
1

How can I get rid of this white bar at the top of this page?

IMG_6996
IMG_69961170×2532 496 KB

1 Like
2

This is actually your announcement bar

image
image1345×257 59.3 KB

Add a background color to it from the customizer, you will see the text and also if it rovides an option to take this full width.

Best

1 Like
3

Hey @tedenfield96

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.utility-bar__grid:has(.announcement-bar) {
    background: black !important;
}
</style>

RESULT:

image
image336×598 38.3 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
4

Hey @tedenfield96 ,

What’s your store URL? I will take a look for you.

3 Likes
5
1 Like
6

Your issue is you somehow changed the color settings of the announcement bar and the words are the same color as the background. Quick fix:

Screenshot 2026-01-24 122052
Screenshot 2026-01-24 1220521915×711 136 KB

7

It does not seem to be my announcement bar

I can click the announcement bar(above the header) and it shows as announcement. However the white bar under my header is clickable

8
  1. Go to Online Store → Themes → Edit code
  2. Find the file theme.liquid
  3. Add this at the very bottom if you want to hide the announcement bar
<style>
.announcement-bar-section{
    display: none !important;
}
</style>

or this if you want it to be black:

<style>
.announcement-bar-section *{
    background: black !important ;
}
</style>

image
image1813×483 102 KB

image
image1705×751 146 KB

10

IMG_7001
IMG_70011170×2532 443 KB
It’s not my announcement bar. It’s under my announcement bar and header

11

It’s only on that page that comes up if you click shop now

12

Yep. I figured out that you are viewing the COLLECTION LIST TEMPLATE. There is a white space because that’s the color of the Main Content.

Theme settings, custom css

body {
  background-color: #000000 !important;
}
13

Need to set black background and bg gradient on your first color scheme.
Otherwise, add this to Theme Settings-> Custom CSS:

html body {
  --color-background: black;
  --gradient-background: black;
}
14

@tedenfield96 please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.title--primary {margin-top: 0rem !important;    margin-bottom: 4rem;    padding-top: 4rem;}

image
image1366×768 311 KB

1 Like
15

Just change the color of the header to black or white it will for sure look awesome.

16

This worked perfectly! Thanks!!

1 Like
17

@tedenfield96 welcome, do let me know if you need any updates later. You can DM me or email me on the address given on my profile