How to Hide the Announcement Bar on Mobile in Squarespace

In this blog tutorial, learn how to hide the announcement bar specifically for the mobile view on Squarespace without affecting the desktop view.

Let’s dive in..

Watch the video

Check out the YouTube video below 👇

So, what I want to do is hide the announcement bar (marked in red) on the mobile view while keeping it visible on the desktop view. To achieve this, we need to add some custom code.

Go to the Custom CSS section in Squarespace and add the following code:

@media screen and (max-width: 767px) {

  div.sqs-announcement-bar-dropzone {

    display: none !important;

  }

}

Continued under the image.

As you can see, when we added this code, the announcement bar became hidden on the mobile view. Continued under the image.

While still active in the desktop view:

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.