Jump to content

Responsive Sticky Announcement bar with Sticky Nav

Recommended Posts

Hi Experts,

Here is the code I've added in the CSS for the sticky announcement bar with a sticky nav (image attached).

.Header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 35px;
.Content-outer {
  margin-top: 50px;
.sqs-announcement-bar-dropzone {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
span.sqs-announcement-bar-close {
    display: none;
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 80px;

However, if the browser is set to smaller, the set height of the announcement bar would cut off the messages (image attached). If I change the code for the header top to bigger than 35px, then it creates a gap between the announcement bar and the nav bar. 

Question: Is there any way to avoid this happening? TIA

Screenshot 2022-12-15 at 21.28.09.png

Screenshot 2022-12-15 at 21.28.25.png

Link to comment
  • Replies 1
  • Views 333
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.