Change menu item color when scroll

Hi

So, when I open my site the top menu background is transparent and the menu item is white, which is perfect, as well as the function that the background change to white (from transparent) when I scroll down the page. The problem is that when I scroll down the menu item remain white which causes a problem to see them. So I want the color to change to black as I scroll down. I guess it is a simple CSS code, but I struggle to find it. Please help me out here. Thank you!

Hi,

Here is the CSS code to change the menu item color when the page is scrolled:

.site-header.float-header #mainnav ul li a, .site-header.float-header #mainnav ul li::before {
    color: yellow;
}

You can add it to: Customize > additional CSS

Regards,
Awan

Thank you Awan, it worked just perfect! But I need the site title to change color as well.

I also struggles to find the code to change the font, the font size and and the font weight. It is awesome if you are able to ad the code for the same customization for the site tile at the same time

Thank you!

Hi,

I see… then please change the code in above using this:

.site-header.float-header .site-description {
    font-size: 16px;
    font-weight: normal;
    margin-top: 0;
}
.site-header.float-header .site-title a {
    font-size: 28px;
    font-weight: normal;
}

.site-header.float-header .site-title a, .site-header.float-header .site-description, .site-header.float-header #mainnav ul li a, .site-header.float-header #mainnav ul li::before {
    color: yellow;
}

You might need to change the font-size, font-weight, and the color from those CSS code.

Regards,
Awan

Thank you again. Last thing, how do I change the font itself. I want the font family to be Poppins for the menu items.

Hi,

Sorry, I don’t get your question. Can you explain about the “Poppins”?

I just want to change the font

Oh I see, you can use this plugin https://wordpress.org/plugins/easy-google-fonts/ then.

Let me know if you need a help on using this plugin.

Hi Awan,

I used this css to change the menu color after scroll:

.site-header.float-header #mainnav ul li a, .site-header.float-header #mainnav ul li::before {
color: yellow;
}

But now I don’t know how to set the hover color anymore…Can you please help me?

Hi @marko88,

Please try these CSS code to working with hover effect:

.site-header.float-header #mainnav ul li a:hover{
    color: red;
}

Regards,
Awan