Announcement Bar Height

I am hoping to figure out how the reduce the overall height/size of the announcement bar on the Harris Template. It is really large at default settings but I can't figure out the code to get it to reduce properly. Any help would be much appreciated.

Try adding to Home > Design > Custoom CSS. If it doesn't work, can you share site url?

.sqs-announcement-bar-dropzone {
    height: 15px;
}

That didn't fix it but here is the link

http://www.qualiq.ca

I have tried a few things that I think should work, but nothing seems to do the trick. Thank you for your help!

@KristinGibson

/* Decrease font size */
.sqs-announcement-bar-text p {
  font-size: 15px;
}
/* Decrease height */
.sqs-announcement-bar-text {
    padding-top: 5px;
    padding-bottom: 5px;
}
/* Close icon */
.sqs-announcement-bar-close:after {
    line-height: 1.5em;
}

That did it! Thank you so much!

Hello,

does this custom CSS still work for resizing announcement bar?

On 8/5/2022 at 2:37 PM, IbbyA said:

Hello,

does this custom CSS still work for resizing announcement bar?

Hi. You can add code & try resize.

Reviving this thread in hopes that @tuanphan may have a solution in Squarespace 7.1

The announcement bar is generally way to high, especially in mobile view - unfortunately code above does not work to target font or space.

A quick update: just found a solution thanks to @paul2009 who pointed out a (persistent) copy/paste bug in this thread