Cannot override bootstrap styling

For example, if I want to change the color of the navlinks and add a hover effect, it doesn't override it and still use the defaults provided by the framework.

My guess is you're trying to override the wrong class (or wrong sizing of the class) which is a very easy mistake to make. Check to be sure the class you are working with is indeed the one that is in charge of the color and hover of that color for the navlinks. I use external scripts for navigation so I am not sure what is what on the built in navs ... goes to check ...

Ok I started with a blank project and added the Navigation Clean to the project. When I hover over any of the buttons I make sure that in the Overview tree it is highlighting the "Link" part of the "Nav Item". In the Styles window there's a big long class that pops up right to the top for both the main state and the hover state to change the colors. Since this is an "altered or created" component, you should find that the overrides are already in it (not locked or default Bootstrap classes). Just change those and you should be all set.

That should be pretty much the same for all menus, but could be different depending on structure. Since I don't know what menu you used it's hard to help any further. Let me know if it's a different menu.

Also, what OS are you on? What version of BSS? These can play into it as well. I'm on Mac with the newest 5.02 of BSS and it's working fine for me to override the colors in this menu.

Let me know which menu you are using and I will be happy to check that one for you as well.

I'm on Windows with the newest version, 5.02 of BSS. But when I try to change the color of the nav-links, it doesn't work.

https://imgur.com/1OPqK7J

Since there are 3 classes applying the style you will need to use at least 3 classes to meet the Specificity Rules for overide.

.navbar-nav .nav-link.color {
  color: red;
}

https://specificity.keegan.st/

Default Bootstrap Style

.navbar-light .navbar-nav .nav-link {
  color: rgba(0,0,0,.5);
}

automagically works here.

enter image description here

@ marrco

I think you made a mistake as that is targeting the "active" only.

Ah ok, thank you Twinstream, I thought the stylesheet would override bootstrap's default because it is placed the last in the head element.