How can I make the announcement bar transparent?

Store Design
, , ,

Topic summary

A user seeks help making their announcement bar transparent on a Shopify store (Nexwatches).

Key Points:

  • The site currently has a white page background, which would show through a transparent announcement bar
  • A solution provider warns that making the bar transparent may cause visibility issues: the header could hide the announcement bar on hover
  • Proposed Solution: Add custom CSS code to the theme.scss file:
    #section-announcement {
  background: transparent !important;
  color: #fff !important;
  position: absolute;
  width: 100%;
}

Status: The discussion provides a CSS workaround with caveats about potential design conflicts. Implementation details shared but concerns about header overlap remain unresolved.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello!

Is there anyone here that know how i can make the annoucement bar transparant?

Thank you!

Skjermbilde 2022-11-13 kl. 15.44.20.png
Skjermbilde 2022-11-13 kl. 15.44.20.png2078×136 78.6 KB

2

@Rubberduck - can you please share your site link? it needs css

1 Like
3

Hello!

The website link: Nexwatches.no

4

@Rubberduck - your age background is white, so it will still show white only

5

How do i make it transparant?

6

@Rubberduck - you can make like 1st screenshot , but I do not recommend it as on hover, header will hide announcement bar

suyash1_0-1668353530861.png
suyash1_0-1668353530861.png1366×768 237 KB

suyash1_1-1668353573102.png
suyash1_1-1668353573102.png1366×768 206 KB

7

How do i make it like the first picture?

8

@Rubberduck - please add the given css to the very end of your theme.scss file and check

#section-announcement {
    background: transparent !important;    color: #fff !important;    position: absolute;    width: 100%;
}