1

I just added my menus and that is working but they are the common blue with an underline. So I wanted to give them another color etc.

You can do that with the .nav-item in css. But when i do that:

.menu-item{
  color: #fafafa;
}

It is not showing and the inspector shows this:

I have no idea what this means but I think the browser isn't reading this. How can I fix this problem?

m4n0
  • 29,823
  • 27
  • 76
  • 89
Arjen
  • 1,002
  • 2
  • 6
  • 22
  • 2
    There is another color property with higher specificity value which is overriding it. So try to increase the specificity of your selector by including parent elements. For example `nav .menu-item` – m4n0 Jun 25 '20 at 11:19
  • or you can force it with .menu-item{color: #fafafa !important} – PeterJoe Jun 25 '20 at 11:23
  • 1
    _“I have no idea what this means”_ - https://stackoverflow.com/questions/3047056/what-do-the-crossed-style-properties-in-google-chrome-devtools-mean – CBroe Jun 25 '20 at 11:24
  • @m4n0 thanks, but it isn't working. I checked and i think it is LI is overriding it but i have not LI in my style sheet – Arjen Jun 25 '20 at 11:24
  • That `nav .menu-item` is just an example. I am not aware of what code you are using. If you can show me your webpage, I can give you the exact code needed. – m4n0 Jun 25 '20 at 11:26
  • @PeterJoe i did that and inspector sees it but it isn't applying to my menu – Arjen Jun 25 '20 at 11:29
  • @m4n0 code or the actual page? – Arjen Jun 25 '20 at 11:29
  • I'd prefer actual page. – m4n0 Jun 25 '20 at 11:32
  • @m4n0 i have found that A was overwriting it and when i give A a color it is working but that all my links are white – Arjen Jun 25 '20 at 11:35

1 Answers1

1

I have found the answer. The .menu-item was being overrided by a

So i did this in my css:

.menu-item a{
color: #fafafa;
}

And now it works. Thanks to everyone who was trying to help!

Arjen
  • 1,002
  • 2
  • 6
  • 22