Jump to content

Button link in navigation not working well - can I change its hotspot size?

Go to solution Solved by creedon,

Recommended Posts

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!



Edited by MiriamB
Link to comment
  • Solution

Replace your CSS with the following. Make a copy somewhere!

.primary-button-style-solid .header-actions .header-actions-action--cta .sqs-button-element--primary {

  background-color : unset;

.primary-button-shape-custom .header-actions .header-actions-action--cta .sqs-button-element--primary {

  border-radius : unset;

.header-actions .header-actions-action--cta a {

  background-image : url( https://images.squarespace-cdn.com/content/v1/5ea2ece99c62cc1c1c322a6c/da9bab42-3bce-47bd-87a1-b3d6f1e99cff/miriam-bos-copyright-shop-icon-shopify.jpg );
  background-position : center;
  background-repeat : no-repeat;
  background-size : contain;
  height : 100px;
  width : 75px;

This is for v7.1 and specific to the posters need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.