Change Header Color

Hi,

I can’t figure out how to change the buttons of the header’s color,
I want to make the header white but the buttons are not changing color so they are “invisible”.

I want the header to become white, also if you can give me an example on how a white header should look (buttons/header’s colors), I am not a front-end developer so I have difficulty to make the colors look good and all.

I know that is not your job, so do not waste much of your time on it, the classes for the header and the buttons to change the colors will be more than sufficient.

Thank you,
Fares

Dear Fares,

If I could understand your point correctly, you would add this CSS code into your site’s additional CSS which resides under Appearance > Customize > Additional CSS.


.btn-menu {
  color: #ff0000;
}

If I couldn’t, please share the link to your site.

Regards,
Kharis

Hi Kharis,
the color change is not working, I tried:

.btn-menu {
  color: black!important;
}

And it didn’t change the color.

Thank you,
Fares

Website link: 104.196.3.121

Hi again,

I found a solution but there is still a problem with the hover effect not appearing anymore (the red thing transiting to the right when hovering on a sub-menu item over it’s “li”).

I think it is because of the !important part which overides the other things?

What is the solution to my existing code to repair the glitch?

.site-header {
  background-color:#ffffff;
}
.menu {
  background-color:#ffffff;
}
.menu a, .sub-menu li a{
  color:black!important;
  background-color:#ffffff!important;
}

#mainnav ul li ul:after {
  background-color:#ffffff!important;
}

Thank you for your support,

Fares

EDIT: the last CSS code does nothing from what I see, I am trying to test out what’s the class for that upper little lines