MiriamB

Oh wow! This worked instantly. Thanks so much @creedon! That made my day!

Site URL: http://www.miriambos.com Hi there, I wonder if anyone can help me with this issue? A little while ago, I changed the extra link in my navigation bar into an image. But there is only a very small area (I believe it's like only 1 pixel) that people can click on to use the link. It's supposed to link to my shop. If you hover it for a while, there's a chance you'll find that one pixel, showing the 'clicking hand' icon. But for most people it will seem that the button isn't working. I'm not sure if it's the 'hot spot' part that needs enlarging somehow. Is there a custom css I can add to make the whole image clickable? Currently, I'm using this code below that I found on this forum: It works, except that the hotspot is probably too small and not using the image area to click. /* 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; } Can someone advice or help? Thanks SO much in advance! Best, Miriam

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

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

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

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

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