announcement-bar Announcement bar different on one page

Does anyone have a way of changing the text and link in the announcement bar on a single page? Thanks!

Hi. Can you share link to page where you want to change? We can use CSS/Script code to achieve this

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

Thank you

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>

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?

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.

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>
 

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

Yes it is https://www.creativeportrait.net.au/special-offer-booking-page

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

Yes it is https://www.creativeportrait.net.au/special-offer-booking-page

 

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>

Thank you so much Tuan!!!

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!

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?

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

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>