benmeaker

Hi. Try adding this to Design > Custom CSS
header#header:before, footer.sections:after { content: ""; background-image: url(https://static1.squarespace.com/static/5fd7b9876223c8317d1720c2/t/60621756b6a902732b617194/1617041238540/znth-bar.jpg); display: block; width: 100%; height: 20px; background-size: cover; }  

Hello Bangkank36,
Thank you so much for taking a look at this for me, and for coding this up! Truly appreciated.
I've injected the code below into the Custom CSS but alas, it doesn't seem to be working. There's now a box that appears on the page instead. Not sure what I'm doing wrong!
Thanks so much.
 
/* Join button */ .header-menu-cta * { width: 100px; padding-bottom: 19%; height: 0; position: relative; margin: 0 auto; } .header-menu-cta .btn { background-image: url(https://static1.squarespace.com/static/5fd7b9876223c8317d1720c2/t/60623f6139ba8b041474c9b6/1617051489136/join-us.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; min-width: inherit; } .header-menu-cta .btn:hover, .header-actions-action--cta:hover { opacity: 0.7; }  

Thank you sooooo much! That worked a treat. You absolute legend. Thanks a ton.

Hello Bangkank36,
Thank you so much for taking a look at this for me, and for coding this up! Truly appreciated.
I've injected the code below into the Custom CSS but alas, it doesn't seem to be working. There's now a box that appears on the page instead. Not sure what I'm doing wrong!
Thanks so much.
 
/* Join button */ .header-menu-cta * { width: 100px; padding-bottom: 19%; height: 0; position: relative; margin: 0 auto; } .header-menu-cta .btn { background-image: url(https://static1.squarespace.com/static/5fd7b9876223c8317d1720c2/t/60623f6139ba8b041474c9b6/1617051489136/join-us.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; min-width: inherit; } .header-menu-cta .btn:hover, .header-actions-action--cta:hover { opacity: 0.7; }  

I saw you have one image on desktop to I tried to make sample code on mobile
/* Join button */ .header-menu-cta * { width: 100px; padding-bottom: 19%; height: 0; position: relative; margin: 0 auto; } .header-menu-cta .btn { background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; min-width: inherit; } .header-menu-cta .btn:hover, .header-actions-action--cta:hover { opacity: 0.7; } To change the image (different color) on other page, you just need to inject the custom css on individual pages via Page Settings->Advanced->Code injection and update the image url
<style> /* The mobile button */ .header-menu-cta .btn { background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png); } /* The desktop button */ .header-actions-action--cta { background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png); } </style>

Site URL: https://www.znthtriclub.com/
Hi there,
I'm hoping someone way more knowledgeable than I am might be able to help with the issue I'm facing.
In short, I'm trying to replace the standard CTA button one can have in the nav bar with a bespoke image, such as the one attached here for example. Ideally, I would love this image to change depending on the page you're own (i.e. a lighter version for a darker page, and vice versa) as well as the option of having a hover action. It also needs to work on mobile.
You can see on my current website where I've got to. Basically, I've managed by boshing together some CSS taken from various bits and bobs I could find on the web. It's not pretty but at least I have an image for my CTA. The issue right now is that it doesn't work on mobile, there's no hover and I can't apply a different colored version for other pages.
Here's the code I used in the Custom CSS field.
/* Join button */ .header-actions-action--cta * { background: transparent !important; color: transparent !important; } .header-actions-action--cta { background-image: url(https://static1.squarespace.com/static/5fd7b9876223c8317d1720c2/t/60624222fc4584071e57dd8e/1617052194489/join-the-team.png); background-size: 100%; padding: 2vw; background-repeat: no-repeat; background-position: center center; } Any advice, tips or tricks would be immensely appreciated!
Thank you so much,
Ben