benmeaker

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

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