Help With Navigation Button in Sticky Scroll

Hi Tom and Leo,

I've come for help for a really simple CSS problem for the button I've created on my client's website:
https://marylandsacupuncture.com/

I've successfully shrunk down the size of the button when the navigation remains non-scrolled at the top.

However, I cannot seem to get the padding done properly when it's scrolling down and remaining sticky.

Below is my CSS so far:
.main-navigation .menu-button,
.main-navigation .menu-button:visited {
background: transparent;
border: 2px solid #000;
color: #000;
border-radius: 20px;
}

.main-navigation .menu-button:hover,
.main-navigation .menu-button:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
border-radius: 20px;
}

.main-navigation .navigation-stick .menu-button,
.main-navigation .navigation-stick .menu-button:visited {
background: transparent;
border: 2px solid #000;
color: #000;
border-radius: 20px;
padding-top: 10px;
}

.main-navigation .navigation-stick .menu-button:hover,
.main-navigation .navigation-stick .menu-button:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
border-radius: 20px;
padding-top: 10px;
}

Please help me out here.

Best,
Simon