How can I add a background image as a button without enlarging the clickable area?

Toptoys2uHS
Explorer
83 1 9

Hello All,

 

I would like to find out how to add an image as a button background for the navigation menu, without the actionable area (the part where the button can be clicked), being larger than the image itself.

 

Another issue is that after adding the image as the button, it then moves itself out of line compared to the other navigation menu items.

 

I have tried changing the location of the button with "margin" and "padding-left/padding-right" CSS, but it has not worked unfortunately.

 

The code to implement the background image is as follows:

 

.nav-bar__item a[href="/collections/halloween"] {
min-width: 125px;
background: transparent!important;
background-image: url(https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Button_updated.png?v=1695201412)!importa...;
background-size: contain !important;
background-repeat: no-repeat!important;
background-position: center!important;
min-height: 100px !important;
font-size: 0px;
min-height: 150px;
}

 

This is what it looks like after the code:

Screenshot 2023-09-20 110706.png

 

Would anyone be able to provide a solution so that it keeps the same size as the rest of the buttons, and stays in line with the rest of the navigation menu?

 

The website can be found here: https://toptoys2u.co.uk/

 

Many thanks to any help!

Replies 2 (2)

SideNode
Shopify Partner
159 38 42

hi @Toptoys2uHS 
Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.nav-bar__item a[href="/collections/halloween"] {
    background: transparent!important;
    background-image: url(https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Button_updated.png?v=1695201412)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    font-size: 0px;
    min-height: 40px;
    min-width: 100px;
}

you can see the change

SideNode_0-1695207164549.png

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

 

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION
Toptoys2uHS
Explorer
83 1 9

Hello SideNode,

 

Thank you for your reply.

 

I have tried to make these changes before, however I am then left with a large gap between the final text button of "Clearance" and the new image button of "Halloween".


Also the gap between the buttons and the text on the navigation menu has also widened. 

Is there a way to reduce the gap in both of the points highlighted in this image?

 

Screenshot 2023-09-20 161412.png

 

Thank you for your help.