Bootstrap navbar link color won't change

Question

I need to change my navbar links to white and space them out across the navbar. I have written code for this but I can\'t seem to figure out why/where it keeps getting overr

Answer 1

Can anyone help me understand what I'm doing wrong?

The specificity of your custom css rule must either match or exceed the specificity of the corresponding Bootstrap rule.

So, in this particular case you need a rule that looks like this:

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

Click "run code snippet" button below and expand to full page to verify that it works:

    



    
    

        

            

                
                    BOOKS
                
                

                    Branding Sutra
                
            
            

                
                    LEARNING LAB
                
                

                    Workshops
                    Classes
                    Audio Downloads
                
            
            

                SERVICES
            
        
    

More info about CSS specificity:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And: CSS Specificity Calculator