Change announcement bar background color on hover Debut Theme

Store Design
1

Hello,

I recently added an announcement bar to my store (Debut Theme) and would like to include a page link in the editor. But if I add the link the background color of the announcement bar changes on hover which I would like to suppress. How can I change this background color?

My url is: celinasshop.myshopify.com

Thanks!

Celina

1 Like
2 
.announcement-bar {
    background-color: #ff7829 !important;
}

Add this code in the bottom of the theme.css

** @CEDOUBLE **
if you need more help let me know.

Thank you.

3

Hi,

thank you for the quick reply!

I tried this already (tried it again) but it unfortunately doesn’t change a thing. Maybe it’s cause I don’t need to change the general background color of the announcement bar but only want to prevent it from changing on hover.

4

where you are adding code. share me screenshot

5

Ok, here you go:

1 Like
6

Hello @CEDOUBLE !

Hope you are doing well.

Please add the below CSS code in the theme.css file at the bottom:

.announcement-bar__link {
    background-color: #ebebeb !important;
}

Hope this will help you out.

7 
.announcement-bar__message {
    color: white;
    background-color: red !important;
}

@CEDOUBLE Try this code

8

Hi Binal,> > thank you very much, unfortunately it still doesn’t work. :disappointed_face:

1 Like
9

First, add this one:

.announcement-bar__link:hover {
    background-color: #ededed !important;
}

If this does not work then add this one:

.announcement-bar__message {
    background-color: #ededed !important;
}
10

Also not working

11

Both in combination did the trick, thank you!

1 Like