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

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

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>

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.

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

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

 

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

 

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

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 
 

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 
 

What is site url? We can check easier

Thanks for your reply (and time!) @tuanphan it's www.miriambos.com 

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

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