Button in Navigation Bar

I'm trying to turn the last item (Volunteer at Art's House) in the navigation bar into a button. The site uses a Montauk template and version 7. I used the code from https://www.bigcatcreative.com/blog/header-navigation-button-squarespace for the Avenue Template (that blog post doesn't have code for Montauk), and it looks great with one exception. The top of the button seems to be aligned with the rest of the navigation items, which makes the text somewhat offset. Is there any way to align the button text with the rest of it?

I should have included that the website is www.riverfallscab.org. The screenshot above is from an unsaved version.

Unfortunately it does't work with Avenue template, Squarespace 7.0. Could you help me out?

On 10/29/2023 at 12:29 AM, dasMeerIstBlau said:

Unfortunately it does't work with Avenue template, Squarespace 7.0. Could you help me out?

With Avenue, use this code

.main-nav>ul>li:last-child>a {
    background-color: black;
    color: white !important;
    padding: 10px 20px !important;
}

On 10/30/2023 at 10:16 AM, tuanphan said:

I'm sorry, it does't work on our Website Prinzenart, Squarespace7.0, Avenue

On 11/3/2023 at 10:44 PM, dasMeerIstBlau said:

 

What is your site url?

https://kathrin-prinz-8wdn.squarespace.com

On 11/16/2023 at 4:52 PM, dasMeerIstBlau said:

https://kathrin-prinz-8wdn.squarespace.com

Use this code

.main-nav>ul>li:nth-last-child(2)>a {
    background-color: black;
    color: white !important;
    padding: 10px 20px !important;
    position: relative;
    top: 50px;
}