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

[Toptoys2uHS]

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)!important!important);
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:

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!

[SideNode]

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

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

[Toptoys2uHS]

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?

Thank you for your help.