Jump to content

Announcement bar different on one page

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
On 1/5/2022 at 3:16 PM, Jeremyn said:

Hi there, is it possible to show the announcement bar on a single page?  www.creativeportrait.net.au 

Thank you

To show on single page, first add this to Design  >Custom CSS

/* hide announcement bar on all pages */
.sqs-announcement-bar-dropzone {
    display: none;
}

Next, edit single page >> Add a Code Block (any where) >> Paste this code

(You can add to Page Header if using Business plan or higher)

<style>
  .sqs-announcement-bar-dropzone {
    display: block !important;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, Jeremyn said:

Awesome Tuan, thank you very much for your quick reply.  Silly question... Is the announcement bar goes with the header or can be display without the header on a landing page?

With code, you can remove header + show announcement bar on specific page.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I have added this code but it hide header and announcement bar together. How can I hide the header while keeping the announcement bar please?

 

<!-- Announcement bar -->
<style>
  .sqs-announcement-bar-dropzone {
    display: block !important;
}
</style>

<!-- Header and resize -->
<style>
  #header {
  display: none!important;} 
</style>
 

Link to comment
4 hours ago, Jeremyn said:

I have added this code but it hide header and announcement bar together. How can I hide the header while keeping the announcement bar please?

 

<!-- Announcement bar -->
<style>
  .sqs-announcement-bar-dropzone {
    display: block !important;
}
</style>

<!-- Header and resize -->
<style>
  #header {
  display: none!important;} 
</style>
 

Can you share link to that page? We can check class name easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/8/2022 at 6:41 PM, Jeremyn said:

First, remove this code

<style>
  #header {
  display: none!important;} 
</style>

Next, add this new code

<style>
  /* hide header */
  .header-announcement-bar-wrapper {
    display: none;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
On 11/10/2022 at 12:25 PM, cloecloa said:

Hi @tuanphan

 

Thanks for your help o. this chain. I see at the top you say it is possible to change text and link on the announcement bar on a single page. Are you able to let me know how to do that? 

 

URL is here:https://www.howaboutnope.com/np-shop

 

Thank you!

I see you have 2 links, change both or which?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/14/2022 at 10:36 AM, cloecloa said:

Hey! 

 

Thanks for coming back to me, it would to change the whole announcement bar to say "10% off your first order, expires in 24hrs", it would link to a form on the page.

Thanks,

Chloe

Add this to that Page Header

<style>
  div#announcement-bar-text-inner-id p a {
    font-size: 0;
}
div#announcement-bar-text-inner-id p:last-child:after {
    content: "10% off your first order, expires in 24hrs";
    font-size: 22px;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.