How to remove extra spacing between menu and bottom of header

[ryankono]

Hello Shopify community, I've been trying to troubleshoot and work on some of the coding myself but I cannot figure it out I'm hoping maybe someone can help me out. I basically wanted to upload a photo and turn it into a small button on the right middle of my header. I found a solution but it isn't great so a better one for installing a custom high res image button would be great as right now it is a little blurry. However the new issue that has come from my set u is a ton of extra space has been created under my menu. As you can see from my screenshot when the image code is being called it makes a bunch of extra space, and when I don't call it the spacing is normal. Any thoughts on improving my code or a solution for my current issue would be great. This is what I have, I included the header with and without the code and then the code I am using. Here is my websites URL: https://konopelskimeats.com/

[Guleria · Accepted solution]

Hello @ryankono ,

Update the css

.shopnow-btn {
    background-image: url(/cdn/shop/files/shop_now_small_de8e015f-6a94-4657-ad0d-9ba1f0c67421.png?v=1733205154);
    position: absolute;
    left: 80%;
    top: 28%;
    bottom: 0px;
    cursor: pointer;
    width: 250px; 
    text-align: center; 
    background-repeat: no-repeat;
}

If problem solved don't forget to Like it and Mark it as Solution!
If you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

[ryankono]

Amazing thank you so much!! This worked perfectly

[ryankono]

Is there something I can add to make the change only for desktop and not mobile?

[ryankono]

Actually never mind I was able to leave the second half of the old css to keep the mobile version the same. Thanks again!