Jump to content

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

Go to solution Solved by inside_the_square,

Recommended Posts

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!

Screenshot 2024-01-06 at 10.05.19.png

Link to comment
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):

image.thumb.png.dc809cd7337e48ddea7ad78fb9960d68.png

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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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!)

Link to comment
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.

image.thumb.png.db5122e7d8b2f2174c31042c1d032c67.png

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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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!

IMG_3908.PNG

Link to comment
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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.

IMG_4217.PNG

Link to comment
  • 2 months later...

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!

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

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}
}

IMG_5874.PNG

Link to comment
  • Solution

I recommend adding this CSS to your CSS file, not the footer code. You'll find your CSS by navigating to Website -> Pages -> Website Tools -> Custom CSS.

The reason it didn't work when you added it to your footer because you can have all kinds of code in there, not solely CSS. When you add CSS via any form code injection, you have to tell the computer "this is a style code"

There are ways to do it, but it is much easier (and loads faster) when you add it to the spot already reserved for your custom CSS codes. 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

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.