Announcement Bar CSS

Change announcement bar background color (one page)

#1. Add this code to Page Header Code Injection and click Save

<!-- change announcement bar background color - One Page -->
<style>
.sqs-announcement-bar {
    background-color: #f1f !important;
}
</style>

Change Announcement Bar Background Color One Page 01 Min

#2. You will have a result like this

Change Announcement Bar Background Color One Page 02 Min

Remove it on one page

Add this code to Page Header Code Injection and click Save

<!-- remove it on one page -->
<style>
div.sqs-announcement-bar-dropzone {
    display: none !important;
}
</style>

Remove It On One Page 01 Min

Remove X icon

Add this code to CSS Custom Box and click Save

/* remove X icon */
span.sqs-announcement-bar-close {
    display: none !important;
}

Remove X Icon 01 Min

Change text color

Add this code to CSS Custom Box and click Save

/* change text color */
div#announcement-bar-text-inner-id * {
    color: #000 !important;
}

Change Text Color 01 Min

Keep current color when overlay menu is open

Add this code to CSS Custom Box and click Save

/* keep current color when overlay menu is open */
div#announcement-bar-text-inner-id * {
    color: #000 !important;
}
.sqs-announcement-bar {
    background-color: #f1f !important;
}

Keep Same Color When Overlay Menu Is Open 01 Min

Hide the announcement bar on the scroll

Add this code to CSS Custom Box and click Save

/* hide it on scroll */
header#header.shrink div.sqs-announcement-bar-dropzone {
    display: none !important;
}

Hide It On Scroll 01 Min

Move the announcement bar under the header

Add this code to CSS Custom Box and click Save

/* move it under header */
header#header {
    display: flex;
    flex-direction: column-reverse;
}

Move It Under Header 01 Min

Apply custom font

Add this code to CSS Custom Box and click Save (you can change the example URL font to the URL that you want)

/* apply custom font */
@font-face {
  font-family: 'YourFont-Name';
    src: url(https://static1.squarespace.com/static/62db1f440fdb0b1fc368501f/t/64c2efcd1b07cc1531d9c65e/1690496973572/Anaktoria.otf);

}
div#announcement-bar-text-inner-id * {
    font-family: 'YourFont-Name' !important;
}

Apply Custom Font 01 Min

Reduce height

Add this code to CSS Custom Box and click Save

/* reduce height */
div.sqs-announcement-bar-text {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Reduce Height 01 Min

Remove link underline

Add this code to CSS Custom Box and click Save

/* remove underline */
#announcement-bar-text-inner-id * {
    text-decoration: none !important;
}

Remove Underline 01 Min

Move the announcement bar to the bottom of the screen

Add this code to CSS Custom Box and click Save

div.sqs-announcement-bar-dropzone {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999999 !important;
}

Move To The Bottom Of The Screen 0.1 Min

And you will have this

Move To The Bottom Of The Screen 01 Min

Add an image behind the announcement bar

Add this code to CSS Custom Box and click Save

/* add an image behind announcement bar */
div.sqs-announcement-bar {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/18/14/46/train-8517089_1280.jpg);
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Add An Image Behind Announcement Bar 0.1 Min

The result is like this

Add An Image Behind Announcement Bar 01 Min