[Share code] CSS for Announcement Bar

Some useful CSS for Announcement Bar.

#1. Change announcement bar background color (one page)

Use code to Page Header Code Injection or Code Block (Personal Plan)

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

#2. Remove announcement bar (One page)

Use code to Page Header Code Injection or Code Block (Personal Plan)

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

#3. Remove X Close icon

to Custom CSS box

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

#4. Change Text Color

to Custom CSS box

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

#5. Keep current color when overlay menu is open (text color, announcement bar background)

to Custom CSS box

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

#6. Hide the announcement bar on the scroll

to Custom CSS box

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

#7. Move the announcement bar under the header

to Custom CSS box

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

#8. Apply Custom Font

to Custom CSS box. Replace example font url with your custom font file url.

/* 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;
}

#9. Reduce Announcement Bar Height

to Custom CSS box

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

#10. Remove Link Underline

to Custom CSS box

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

#11. Move the announcement bar to the bottom of the screen

to Custom CSS box

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

#12. Add an image behind the announcement bar

to Custom CSS box

/* 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;
}

If you have any problems, just comment below with site url.

Once again Tuan you've saved the day!! I've spent the last hour trying tutorial after tutorial to get rid of my announcement bar link underline and none of the CSS worked until I found this post. Thank you.