[Resolved] Wrong Navigation Button Color

[Wolf]

I have “two” navigations, one before I scroll down that blends in with the Header. And the one after some scrolling. I used your custom css code to get the button in the navbar and changed the color of the text. This works for the “scrolling navigation” but not the header nav. I also tried adding padding but that just makes the button bigger and does not seperate it from the right side. Could you take a look and supply me with some extra css code?

[Leo]

Hi there,

I’m not sure if I understand.

What color should the buttons be when it’s in static mode?

You also have some problems with the CSS code added:
https://www.screencast.com/t/FlHs3p9p

Let me know 🙂

[Wolf]

I want the text on the button to always be white, the background is correct. There is an error with padding because I intentionally set it to 0 (because increasing it doesn’t give the desired result)

[Tom]

In your CSS, try replacing this:

.main-navigation .main-nav ul li.nav-button a

With this:

#site-navigation .main-nav ul li.nav-button a

Let me know 🙂

[Wolf]

That, unfortunately, doesn’t work either, the button disappears when scrolling down.

[Leo]

I’m still seeing the old CSS added.

can you double check?

Looks like you have caching plugin enabled.

[Wolf]

I removed the new code provided because it was not working

[Wolf]

I readded the new ccs code for you to see that it’s not working properly

[Leo]

Try adding this as well:

.header-wrap #site-navigation:not(.toggled) .main-nav>ul>li.nav-button>a {
    color: #ffffff;
}

[Wolf]

That basically inverts my problem, now the button has white text in the nav menu before scrolling down and is still completely missing after scrolling down

[Leo]

Change the original selector back to:
.main-navigation .main-nav ul li.nav-button a

[Wolf]

🙏 finally working; I also just tested out and remembered that margin was “adding space from the outside” so I changed the code from

    .main-navigation .main-nav ul li.nav-button a {
        background-color: #c06040;
        border: 0px solid #000000;
        padding-right: 10px;
        color: #ffffff;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

to

    .main-navigation .main-nav ul li.nav-button a {
        background-color: #c06040;
        border: 0px solid #000000;
        margin-right: 10px;
        color: #ffffff;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

[Leo]

Awesome 🙂

[Author]

Posts