Injecting custom code to create coloured donate button on our website above navigation menu

Hello,

We had an audit of our charity website, and it was recommended that we add two coloured buttons above our navigation menus on the website (one to donate to our charity, and another to become a member). See screenshot attached.

I can see there is little flexibility on the Squarespace template sites (we are using system 7.0) to adjust the layout of the navigation area, or add additional buttons.

I'm just wondering if anyone can suggest any custom code to create this? I would probably like to adjust the colour codes slightly, but curious to know first if this is possible.

Thanks!

5 hours ago, MantaTrust said:

We had an audit of our charity website, and it was recommended that we add two coloured buttons above our navigation menus on the website (one to donate to our charity, and another to become a member).

You could place these CTA buttons on the banner image without code, for example (copying them from the footer):

If you'd like them in the header, you will need a few lines of code (some HTML and some CSS) to achieve this. The HTML will add the links; the CSS will style the links to look like buttons. The exact code will depend on how you want them to appear on desktop and mobile, and what you want to trigger when they are clicked.

Before deciding on placement, it will be worth checking your analytics to see the percentage of visitors who are using mobile devices because this will generally be higher.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello Paul,

Thanks for getting back to me with your suggestions. I like the look of the CTA buttons on the banner image. However, we would like to have them in the header so that viewers can see the buttons whilst browsing every page on the site.

Just checked the analytics from last year:

Mobile: 58%

Desktop: 40%

We would like to have 2 buttons in the top right corner, with the same look as the buttons we currently have in the footer but with different colours (capitalised font stating 'DONATE' in red and 'JOIN' in orange). I would switch the colouration of the buttons in the footer to match this ('DONATE' in red, 'JOIN' in orange, and 'ADOPT' in yellow).

Donate: https://www.mantatrust.org/donate

Join: https://www.mantatrust.org/the-cyclone

Do you think you would be able to provide some code to create this, and explain the steps to inject it? (Sorry I'm totally new to coding!)

9 hours ago, MantaTrust said:

We would like to have 2 buttons in the top right corner, with the same look as the buttons we currently have in the footer but with different colours (capitalised font stating 'DONATE' in red and 'JOIN' in orange).

Here's a simplified solution to get you started.

Add the following HTML to the Code Injection panel, in the Footer section (there are boxes for header and footer). This will add the links for 'Donate' and 'Join' but they'll be text only at this point and won't be styled or positioned correctly.

<!-- Container for header CTA buttons --> 
<div class="cta-buttons-container">
  <!-- Donate button --> 
  <a href="/donate" class="cta-button donate">Donate</a> 
  <!-- Join button --> <a href="/the-cyclone" class="cta-button join">Join</a>
</div>

When you've saved the HTML above, go to the Custom CSS panel and add the following CSS.

This will style the two links to look like buttons, by adding some 'padding' around the text. Each button can be styled independently to allow for different colours. The buttons have been placed in a 'container' to allow them to be positioned as a pair. You can adjust the top and right positions to suit your needs.

/************************************** 
Styles for header CTA buttons
**************************************/
/* Overall size and position */
.cta-buttons-container { 
  position: absolute; /* or fixed to remain in top corner */ 
  top: 36px; 
  right: 32px;
  display: flex;
  gap: 10px;
  z-index: 9999;
}
/* Style for the buttons */ 
.cta-button { 
  display: inline-block; 
  padding: 3px 15px; 
  text-decoration: none; 
  color: #000; /* black text */ 
  font-weight: bold; 
  text-transform: uppercase;
  cursor: pointer; 
}

/* Color of Donate button */
.cta-button.donate { 
  background-color: #EA4231; 
}

/* Color of Join button */
.cta-button.join { 
  background-color: #F1A241; 
}

Notes:
As this is a simplified example for a forum post, it doesn't take account of smaller devices including mobiles, and doesn't adjust to take account of closing the announcement bar. That said, I hope this helps to get you started.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello Paul,

Oh amazing, thank you so much for providing that! It looks great on our browser now 🙂 

As you've mentioned, the mobile version looks a bit funky now. The buttons kind of float above the navigation menu. Sorry I know this is a lot of work for you, but I don't suppose you might be able to assist with some coding that would make the buttons mobile friendly too?

I'm very much out of depth with coding so wouldn't know how to fix this myself, and would otherwise need to remove the awesome buttons you have provided as we have so many mobile users.

Let me know if that would be ok. Thanks again for your help!

Hello, sorry just following up to see if you have any advice on fixing this for mobile use? Our mobile dropdown is currently a bit broken because of it so would love to sort it soon. Thanks so much in advance for your help!

On 1/16/2024 at 12:59 PM, MantaTrust said:

Hello, sorry just following up to see if you have any advice on fixing this for mobile use? Our mobile dropdown is currently a bit broken because of it so would love to sort it soon. Thanks so much in advance for your help!

If you need to hide both buttons on mobile, you can use this code to Custom CSS box

@media screen and (max-width:767px) {
.cta-buttons-container {
	display: none !important;
}
}

If you want to hide both when overlay menu is open only, use this code

@media screen and (max-width:767px) {
body.is-mobile-overlay-active .cta-buttons-container {
	display: none !important;
}
}

@tuanphan thank you so much that's really helpful! 🙂

I've chosen to hide the buttons when the overlay menu is open only, and it's looking much better. The only slight issue now is the placement of the buttons. They ideally need to shift left and up slightly. Currently, they still overlap the overlay menu and hover on the edge of the header.

Would you be able to provide any code to fix this? Thanks in advance.

Hello @tuanphan sorry just following up to see if you have any solution for the issue above? Thanks in advance!

Hey @MantaTrust - I noticed this question was still open so I thought I would hop in to help you finish up the project 🙂 We can add a little custom code specifically for smaller screens that moves those buttons up and over. Add this code to the end of your CSS, inside the media query brackets:
 

.cta-buttons-container {top:15px; right: 15vw}

Combining it with your other snippet, like this: 

@media screen and (max-width: 767px) {
    body.is-mobile-overlay-active .cta-buttons-container {
        display:none !important
    }
    .cta-buttons-container {top:15px; right: 15vw}
}

I hope that info helps, and best of luck with your project!

Hello @inside_the_square thank you so much for offering your help! I was still at a total loose end so I appreciate it 🙂

I've added your code but it still looks the same 😕 see screenshot attached.

This is my full footer custom CSS for reference, is this all correct? Thanks in advance.

<!-- Container for header CTA buttons --> 
<div class="cta-buttons-container">
  <!-- Donate button --> 
  <a href="/donate" class="cta-button donate">Donate</a> 
  <!-- Join button --> <a href="/the-cyclone" class="cta-button join">Join</a>
</div>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WMKLKCZL"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
@media screen and (max-width: 767px) {
    body.is-mobile-overlay-active .cta-buttons-container {
        display:none !important
    }
    .cta-buttons-container {top:15px; right: 15vw}
}

@inside_the_square amazing thank you!! This has finally fixed the issue for me, after months. Really appreciate it 🙂