How can i change the header color after you scroll down?

Hello.

How can I change the header color after scroll down? Deafult is white, a want change to black.

And second question. Is it possible change only color of “Login/Register” & Cart ico? Not every hyperlink in my page, just that Login/Register and Cart.

Hi,

To change header background after scroll use css code below:

.header-navigation.header-floating.floating {
    background-color: #ffcc00;
}

For login and cart use following css:

.nav-link-right a {
    color: #ff0000;
}

.nav-link-right .nav-link-cart .header-cart-link {
    color: #ff0000;
}

Off course set color values to your liking, and apply code from Appereance > Customize > Additional CSS field.

Best Regards!

Thank you so much! Almost everything works but “Login / Register” it still has the same color.

Now when I scroll color is fine. But I have another problem. When I hover the mouse on Menu, its color changes to white. Is any way to change that? Because my menu hyperlinks are white and they are invisible then.

And one more questions. Is it possible to change color of “three horizontal stripes” - which are responsible for drop down menu on mobile?

Thank you so much for help!

Hi again,

By default it is gray, so you have probably changed it from options. Also I can provide css, but you need to share a link to your website.

Ok, here is my website https://stylespirit.pl/

Ok I Fixed few things. Now background of menu is black even on hover.

But… on any page (products, categories, blog) menu background is still white. Only if I scroll menu change to black. So it works only on main page. Here is example: https://stylespirit.pl/blog/

And still I can’t find how to change color of mobile menu button.

Hi again,

I see that background is black now, so you probably fixed that already.

Regarding mobile menu button, you can change it with css color below:

.header-mobile-menu .toggle-mobile-menu span,
.header-mobile-menu .toggle-mobile-menu span:before,
.header-mobile-menu .toggle-mobile-menu span:after {
    background: #fff;
}

and it should look like this https://www.screencast.com/t/fqDXewmQbD

Regards,

Hello.
I was testing this on my site,

but i have an issue when i hover over my menu.It goes back to white.How can i fix that?

Thanks in advance.

@Zimenz

Hi,

I need to check your site in order to be able to assist. Please provide a link to it.

Hello,

I made a new topic where i have my website nevertheless here is my website

Thanks for your time.

@Zimenz

Hi again,

You can fix this with css code below:

.has-hero .site-header:hover {
    background-color: transparent;
}

Apply it from Appereance > Customize > Additional CSS.

Best Regards!

Worked like a charm!
Thanks a lot!