Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Replacing the CTA button in the nav bar with an image


benmeaker

Question

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

join-button.png

Link to comment

5 answers to this question

Recommended Posts

  • 0
1 hour ago, benmeaker said:

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

 

Updated proper code

/* Join button Mobile*/
.header-menu-cta {
    width: 75px;
    padding-bottom: 15%;
    height: 0;
    position: relative;
    margin: 0 auto;
}
.header-menu .header-menu-cta a {
    background-color: transparent !important;
    border-color: transparent !important
}
.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;
}
/* Join button Desktop */
.header-actions-action--cta {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 1em;
}
.header-actions-action--cta  .btn {
  background-color: transparent !important;
  border-color: transparent !important;
}
.header-menu-cta .btn:hover,
.header-actions-action--cta:hover {
  opacity: 0.7;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
2 hours ago, benmeaker said:

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

join-button.png

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>

image.thumb.png.4dd4417a5a3173b1d887b10495e9f867.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

 

Link to comment
  • 0

@benmeaker I see the find out more image on mobile looks huge. You can use this CSS to resize it.

/* Mobile find out more */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1617044368201_35995 {
    width: 30%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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