How to add a unique style to header's second button?

Hello!

My website needs two buttons in the header, one styled as per the site's standard CTA button styling, and another styled differently.

To get the two buttons in the header, I followed @creedon's solution that worked well: https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Add Buttons to Header#add-buttons-to-header

Now, I need to style the new button differently than the standard CTA button. I'm having trouble figuring out the best way to modify the javascript such that it assigns a new class to the second button. Ideally I'd like to use the site's tertiary button styling for this second button.

I am on Squarespace 7.1.

Any ideas?

Hi @creedon, you can access the site here. Thank you for your help.

On 7/31/2023 at 10:15 AM, OSTS said:

I'm having trouble figuring out the best way to modify the javascript such that it assigns a new class to the second button. Ideally I'd like to use the site's tertiary button styling for this second button.

I adjusted the code so you can add a secondary or tertiary button.

Let us know how it goes.

@creedon It sort of worked, but not entirely. I implemented the v.8 code. While the second button does now take on the tertiary styling, it seems the code has broken the font that's used in the header. It now presents as a fall-back font, and not the site font (Poppins, in this case). Any ideas why that might be?

EDIT: Having a look at Twitter, it looks like the custom font issue is being experienced by other users. Perhaps this is a Squarespace issue.

Quote

Perhaps this is a Squarespace issue.

I think it is as my code does nothing with fonts. I've also been seeing many reports of font and other issues recently.

@creedon It turned out the issue was with Squarespace. All resolved. Thank you for your help.