Hiding header button on one page

Site URL: https://flounder-star-7xs2.squarespace.com/

Hello,

I'd like to hide the ORDER NOW button in my header on the product detail page. 

Site password: kb

Many thanks! 

54 minutes ago, Katie_B said:

Site URL: https://flounder-star-7xs2.squarespace.com/

Hello,

I'd like to hide the ORDER NOW button in my header on the product detail page. 

Site password: kb

Many thanks! 

You can add below code in your Custom CSS editor. It will hide button on both desktop and mobile.

#item-60632671dc94e57b3a76bb27 .header-actions-action--cta,
#item-60632671dc94e57b3a76bb27 .header-menu-cta {
    display: none;
}

On 4/2/2021 at 3:42 AM, Katie_B said:

Site URL: https://flounder-star-7xs2.squarespace.com/

Hello,

I'd like to hide the ORDER NOW button in my header on the product detail page. 

Site password: kb

Many thanks! 

Hi. Add to Design > Custom CSS

/* hide order button on product detail */
body.collection-type-products.view-item header#header a.btn {
    visibility: hidden !important;
}

Hi there!

I'm also looking to hide the button "Book Now" in the nav on this page only: https://www.sandandsaltescapes.com/for-organizations

Any guidance on how to do this would be greatly appreciated.

Thanks so much!

7 minutes ago, maxwel said:

looking to hide the button "Book Now" in the nav on this page only

Add the following to Design > Custom CSS.

#collection-63f83b263c54254b3c306a35 .header-actions--right .header-actions-action {

  display : none;
  
  }

Let us know how it goes.

18 minutes ago, creedon said:

Add the following to Design > Custom CSS.

#collection-63f83b263c54254b3c306a35 .header-actions--right .header-actions-action {

  display : none;
  
  }

Let us know how it goes.

That worked perfectly, thanks so much for the fast response and awesome help!

Hi again! I'm now trying to hide the nav button "Book Now" on this specific landing page: https://www.sandandsaltescapes.com/final-room-flash-sale

Any help with the code to make this happen would be appreciated! If you have instructions as far as how to find the correct collection ID so I can do this in the future without having to ask, I'm all ears 🙂

Thank you!

36 minutes ago, maxwel said:

If you have instructions as far as how to find the correct collection ID so I can do this in the future without having to ask, I'm all ears 🙂

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

1 hour ago, creedon said:

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Thanks! I've installed it and am still a little unsure of next steps. Which ID should I grab? When I run the extension, there isn't a collection ID for the "Book Now" button (I'm assuming that's what we're looking for).

2 hours ago, maxwel said:

Hi again! I'm now trying to hide the nav button "Book Now" on this specific landing page: https://www.sandandsaltescapes.com/final-room-flash-sale

Any help with the code to make this happen would be appreciated! If you have instructions as far as how to find the correct collection ID so I can do this in the future without having to ask, I'm all ears 🙂

Thank you!

Add to Design > Custom CSS

/* Final room flash sale hide buttons */
body#collection-64b82ef6f21edc30584c96bb header#header a.btn {
    display: none;
}

2 hours ago, maxwel said:

Which ID should I grab?

The collection ID should be the first one that shows after you run the code. It should start with #collection...

17 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Final room flash sale hide buttons */
body#collection-64b82ef6f21edc30584c96bb header#header a.btn {
    display: none;
}

 

Thank you so much!

16 hours ago, creedon said:

The collection ID should be the first one that shows after you run the code. It should start with #collection...

Awesome, thank you for walking me through that!

HELLO!
I just tried adding this to my custom css, with my updated collection # but it doesnt seem to be working. Can someone help me out? I am trying to hide the donate button on this specific page. and my collection number is  #collection-6600b7bc68936763b8ce3316

On 4/8/2024 at 11:05 PM, adamkearney said:

HELLO!
I just tried adding this to my custom css, with my updated collection # but it doesnt seem to be working. Can someone help me out? I am trying to hide the donate button on this specific page. and my collection number is  #collection-6600b7bc68936763b8ce3316

You can use this code to Website > Website Tools > Custom CSS. If it doesn't work, you can share link to page, we can check easier.

#collection-6600b7bc68936763b8ce3316 a.btn {
	display: none !important;
}

Thank you so much. works like a charm!

Hi there,

Is anyone able to help me with a similar issue? I'm trying to remove the "BOOK 1 WEEK TRIAL" button from the header only on specific pages  e.g. https://www.inlifewellness.com.au/sign-up-drummoyne

What code do I use to do so? I'll need to do the same thing across multiple pages eventually.

55 minutes ago, Toucan said:

I'm trying to remove the "BOOK 1 WEEK TRIAL" button from the header only on specific pages

The element you are referring to is the announcement bar. The element the OP referred to is commonly referred to as the call to action button or header button.

Many posts in this forum on various ways to alter the AB.

Add the following to Website > Pages > Website Tools > Custom CSS.

// hide announcement bar on some pages, uses LESS syntax

#collection-669dab3fcb2ace32c9fcb56b, // sign up drummoyne
x-twc-selector // dummy selector so that each selector line above can end with a comma

  {
  
    .sqs-announcement-bar-dropzone {
    
      display :none;
      
      }
      
    }

As you need to add other pages to this effect, copy the first selector line of the ruleset and add before the last selector line, replace the collection id with the collection id for the added page. Scroll back several posts of mine in this thread for the link to a tool that will help you find the collection id for a page.

Let us know how it goes.