Jump to content

Replacing the CTA button in the nav bar with an image

Go to solution Solved by Beyondspace,

Recommended Posts

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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. 
Or send to forum message

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

Link to comment
  • 1 year later...

Hello, I hope it's possible to ask an additional question in this older topic.

@tuanphan. Your code here was such a fantastic help to me (thanks!).
I managed to replace the button in my navigation for an image perfectly.
The only trouble is that the image is a tad bit too small and I'm not sure how to resize it.

In your code, I've tried changing the 'width' and 'height' part but that didn't seem to work.
I tried a bigger %, but that gave no results. Then I tried 'pix' and also 'rem' but nothing changed. Maybe there isn't enough space in the nav bar for me to change the image size? I'm not sure. 

Is there perhaps a workaround or a simple snippet of custom CSS that I could add to my website to resize the image and make it somewhat bigger? I've attached a screenshot to show you what it looks like now. It's the 'shop' icon on the right.
It's also positioned a little bit too high, and I wish to align it a bit better with the navigation on the left of the icon.

Ps: On my mobile, it also shows a bit too small. 

I hope you can help me.

Thanks SO much in advance,

M

 

Screen Shot 2022-04-28 at 05.51.27.png

Edited by irrimiri
Forgot one detail, which I've added
Link to comment
On 4/28/2022 at 11:11 AM, irrimiri said:

Hello, I hope it's possible to ask an additional question in this older topic.

@tuanphan. Your code here was such a fantastic help to me (thanks!).
I managed to replace the button in my navigation for an image perfectly.
The only trouble is that the image is a tad bit too small and I'm not sure how to resize it.

In your code, I've tried changing the 'width' and 'height' part but that didn't seem to work.
I tried a bigger %, but that gave no results. Then I tried 'pix' and also 'rem' but nothing changed. Maybe there isn't enough space in the nav bar for me to change the image size? I'm not sure. 

Is there perhaps a workaround or a simple snippet of custom CSS that I could add to my website to resize the image and make it somewhat bigger? I've attached a screenshot to show you what it looks like now. It's the 'shop' icon on the right.
It's also positioned a little bit too high, and I wish to align it a bit better with the navigation on the left of the icon.

Ps: On my mobile, it also shows a bit too small. 

I hope you can help me.

Thanks SO much in advance,

M

 

Screen Shot 2022-04-28 at 05.51.27.png

You need to edit contain to fixed value to change image size

Quote
background-size: contain;

change to

Quote
background-size: 200px;

with another problem, can you share link to your site? We can check easier

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

Thanks so much for replying @tuanphan

Sadly it didn't work the way we hoped. 

It did enlarge the image 😁, but it moved the image away from the screen.
Another issue that I forgot to mention before is the fact that there seems to be only a very small 'hot' area to click on before it links to my shop. Usually, with buttons, we can click the whole image, but with the current change a person has to aim pretty well to be able to click through.
Please see screenshot.

Thanks SO much for your time if you can help me with this.

Best,

 

Miriam 
 

Screen Shot 2022-05-02 at 10.01.10.png

Screen Shot 2022-05-02 at 10.04.11.png

Link to comment
On 5/2/2022 at 3:06 PM, irrimiri said:

Thanks so much for replying @tuanphan

Sadly it didn't work the way we hoped. 

It did enlarge the image 😁, but it moved the image away from the screen.
Another issue that I forgot to mention before is the fact that there seems to be only a very small 'hot' area to click on before it links to my shop. Usually, with buttons, we can click the whole image, but with the current change a person has to aim pretty well to be able to click through.
Please see screenshot.

Thanks SO much for your time if you can help me with this.

Best,

 

Miriam 
 

Screen Shot 2022-05-02 at 10.01.10.png

Screen Shot 2022-05-02 at 10.04.11.png

What is site url? We can check easier

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
  • 2 weeks later...

Hi @tuanphan I thought I'd check in. I hope you could find a moment to have a look at my request regarding the button? It would be so great to enlarge it a little while it stays inside the canvas of the site, and to also make the image clickable. Right now, it is really hard to click on the image. It looks like the hot spot to click on is only a pixel or so, which makes it hard to click at all.
Here's the link to my website.
Http://www.miriambos.com 

A million thank yous!
Best,

M

Link to comment

Hi again, @tuanphan and @bangank36

I've been searching the internet a bit to find the answers to my questions (1: to make the nav button image look bigger, 2: to enlarge the hotspot to click on the button).
I found some answers that helped me a little, though I'm not sure if the snippets of code that I added are correct. But they did help a bit.

Regarding showing the shop-image a little bigger:
I found out that changing the number of the padding helped. Is this a correct solution to change the code like that?
I  changed this bit of code (padding is now 2 em)

/* Join button Desktop */
.header-actions-action--cta {
    background-image: url(yoururl.jpg);
    background-size: contain;
    background-repeat: no-repeat;   
    padding: 2em;   
}

 


Regarding enlarging the clickable area around the image:
I've added a bit of code that I snatched from the internet and added to the .header-actions-action--cta  .btn

I've added the following
 

   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 

Making the code look like the following below. The shop button on my website is better clickable now (instead of only one small area), though it's still only clickable in the middle over its full width. The bottom and top are still not clickable, but it's an improvement for sure.

.header-actions-action--cta  .btn {
  background-color: transparent !important;
  border-color: transparent !important;
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

 



And here is the entire CSS code to see it all together.
Could you kindly tell me if I made the correct changes without risking any trouble on my website? The shop button is still looking a bit small on my mobile phone. I'm not sure how to enlarge the button on the display of my phone yet. 

/* 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://images.squarespace-cdn.com/content/v1/5ea2ece99c62cc1c1c322a6c/da9bab42-3bce-47bd-87a1-b3d6f1e99cff/miriam-bos-copyright-shop-icon-shopify.jpg);
    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://images.squarespace-cdn.com/content/v1/5ea2ece99c62cc1c1c322a6c/da9bab42-3bce-47bd-87a1-b3d6f1e99cff/miriam-bos-copyright-shop-icon-shopify.jpg);
    background-size: contain;
    background-repeat: no-repeat;   
    padding: 2em;   
}

.header-actions-action--cta  .btn {
  background-color: transparent !important;
  border-color: transparent !important;
  display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
.header-menu-cta .btn:hover,
.header-actions-action--cta:hover {
  opacity: 0.7;
}


Again, thanks so much in advance.

Best,

M

 

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.