[Support request] Help With Navigation Button in Sticky Scroll

[Simon]

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

[Leo]

Hi there,

Looks like you’ve disabled sticky navigation?

Looking at your CSS, I think .main-navigation .navigation-stick should be .main-navigation.navigation-stick

[Simon]

I didn’t disable it though. Let me try your code

[Simon]

Leo,
The code worked, but when i typed in padding: 2px, it actually becomes bigger…

[Leo]

Can you try this method here? https://docs.generatepress.com/article/adding-buttons-navigation/

[Simon]

I’ve tried it already, but now it’s not working properly still.

[Leo]

What’s not working properly?

I’m not seeing the sticky navigation?

[Author]

Posts