benmeaker
-
Posts
5 -
Joined
-
Last visited
Reputation Activity
-
benmeaker reacted to tuanphan in Trying to add a top and bottom wrapper/banner/bar
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; }
-
benmeaker got a reaction from tuanphan in Replacing the CTA button in the nav bar with an image
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; }
-
benmeaker got a reaction from Beyondspace in Replacing the CTA button in the nav bar with an image
Thank you sooooo much! That worked a treat. You absolute legend. Thanks a ton.
-
benmeaker got a reaction from Beyondspace in Replacing the CTA button in the nav bar with an image
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; }
-
benmeaker reacted to Beyondspace in Replacing the CTA button in the nav bar with an image
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>
-
benmeaker got a reaction from Beyondspace in Replacing the CTA button in the nav bar with an image
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