Jump to content

[Share] Remove Announcement Bar (One Page)

Recommended Posts

To remove Announcement Bar on One Page, you can use these code.

All add to Custom CSS (except #1 code)

#1. One Page

Use code to Page Header Code Injection (or if plan doesn't support Code Injection, you can edit Page > Add a Code Block > paste the code).

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

#2. Remove on Desktop Only

/* Desktop only */
@media screen and (min-width:992px) {
  div.sqs-announcement-bar-dropzone {
    display: none;
}
}

#3. Remove on Mobile Only

/* Mobile only */
@media screen and (max-width:991px) {
  div.sqs-announcement-bar-dropzone {
    display: none;
}
}

#4. Remove on Blog Page (List)

/* Blog Page (List) */
[class*="type-blog"].view-list div.sqs-announcement-bar-dropzone {
    display: none;
}

#5. Remove on Blog Posts

/* Blog post */
[class*="type-blog"].view-item div.sqs-announcement-bar-dropzone {
    display: none;
}

#6. Remove on Event List

/* Event list */
[class*="type-event"].view-list div.sqs-announcement-bar-dropzone {
    display: none;
}

#7. Remove on Event Detail

/* Event detail */
[class*="type-event"].view-item div.sqs-announcement-bar-dropzone {
    display: none;
}

#8. Remove on Shop/Product Category

/* Shop category */
[class*="type-products"].view-list div.sqs-announcement-bar-dropzone {
    display: none;
}

#9. Remove on Product Detail

/* Individual product */
[class*="type-products"].view-item div.sqs-announcement-bar-dropzone {
    display: none;
}

#10. Remove on Cart Page

/* Cart page */
body#cart div.sqs-announcement-bar-dropzone {
    display: none;
}

#11. Remove on Homepage Only

/* Homepage only */
body.homepage div.sqs-announcement-bar-dropzone {
    display: none;
}

#12. Remove on Other Pages (still keep it on Homepage)

/* Other pages, exclude homepage */
body:not(.homepage) div.sqs-announcement-bar-dropzone {
    display: none;
}

#13. Remove on Scroll Only

/* On Scroll Only */
header#header.shrink div.sqs-announcement-bar-dropzone {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 206
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.