[Share] CSS Announcement Bar Color

Some CSS code to change Announcement Bar Color.

You can add CSS to Website Tools > Custom CSS.

#1. Color on All Pages

div.sqs-announcement-bar {
    background-color: #f1f !important;
}

#2. Color on Desktop

@media screen and (min-width:768px) {
  div.sqs-announcement-bar {
      background-color: #f1f !important;
  }
}

#3. Color on Mobile

@media screen and (max-width:767px) {
  div.sqs-announcement-bar {
      background-color: #f1f !important;
  }
}

#4. Color: before header scroll

header#header:not(.shrink) div.sqs-announcement-bar {
    background-color: #f1f !important;
}

#5. Color on Header Scroll

header#header.shrink div.sqs-announcement-bar {
    background-color: #f1f !important;
}

#6. Color when mobile menu is open

body.header--menu-open div.sqs-announcement-bar {
    background-color: #f1f !important;
}

#7. Color when mobile menu is closed

body:not(.header--menu-open) div.sqs-announcement-bar {
    background-color: #f1f !important;
}

#8. Color on One Page

First, you need to find Page ID

Next, use CSS code like this

#collection-66a1bfc99041e47b896c1e48 div.sqs-announcement-bar {
    background-color: #f1f !important;
}