Change navbar text color Bootstrap

Question

I currently have this piece of html which represents the relevant part of my navbar    lt nav class  navbar navbar-inverse  role  navigation  gt       lt div class  container  gt           lt ul class  nav navbar-nav navbar-right  gt               lt li gt  lt a href     gt  lt span class  glyphicon glyphicon-user  gt  lt  span gt  About lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt span class  glyphicon glyphicon-earphone  gt  lt  span gt  Contact lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt span class  glyphicon glyphicon-briefcase  gt  lt  span gt  Portfolio lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt span class  glyphicon glyphicon-list-alt  gt  lt  span gt  R amp eacute sum amp eacute  lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    And I have this piece of css which I was hoping to use to change the text color of the navbar    nav navbar-nav navbar-right       color  blue      The only problem is that the text color remains unchanged  I also saw that a very similar question went unsolved  I bet whoever can solve this one can solve the other too

User · Answer

For changing the text color in navbar you can use inline css as    lt a style  color   3c6afc  href     gt

User · Answer

In fact  we can simply use the standard bootstrap text colors  instead of hacking the CSS formats   Standard Color examples  text-primary  text-secondary  text-success  text-danger  text-warning  text-info  In the Navbar code sample bellow  the text Homepage would be in the orange color  text-warning     lt a class  navbar-brand text-warning  href      gt  Homepage  lt  a gt    In the Navbar menu item sample bellow  the text Menu Item would be in the blue color  text-primary     lt a class  dropdown-item text-primary  href   my-link  gt Menu Item lt  a gt

User · Answer

The syntax is     nav navbar-nav  navbar-right  gt  li  gt  a      color  blue

User · Answer

this code will work     navbar  navbar-nav  gt  li  navbar-item    navbar  navbar-brand                         color  red                            paste in your css and run if you have a element below  define it as  navbar-item class  eg     lt li gt  Html ActionLink  Login    Login    Home   new   area          new    class    navbar-item     lt  li gt    OR    lt li gt   lt button class  navbar-item  gt hi lt  button gt  lt  li gt

User · Answer

Try this in your css    ntext   color   000000        Then the following in all your navigation bar list codes    lt li gt  lt a href     id  ntext  gt  lt span class  glyphicon glyphicon-user  gt  lt  span gt  About lt  a gt  lt  li gt

User · Answer

As of bootstrap 4  the answer is to simply set navbar-dark in the nav element  which will set the text and links to a light theme     lt nav class  navbar navbar-dark  gt

User · Answer

nav-link   color  blue  important      Worked for me  Bootstrap v4 3 1

User · Answer

Add some inline css to the anchor tag  lt li gt  lt a style    quot color blue quot  href  quot   quot  gt  lt span class  quot glyphicon glyphicon-user quot  gt  lt  span gt  About lt  a gt  lt  li gt   This should add the color blue to the anchor tag text

User · Answer

Try this    nav navbar-nav navbar-right li a span      color  blue      If it doesn t work try this   nav navbar-nav navbar-right li a       color  blue

User · Answer

Thanks WChoward for your answer  I expanded    nav-link   dropdown-item       color  blue  important     nav-link hover   dropdown-item hover       color  darkgreen  important

User · Answer

The thread you linked to does answer the question for you  You need to target the a elements themselves  E g     nav navbar-nav navbar-right a       color  blue      If that doesn t work  it just needs to be more specific  E g    nav navbar-nav navbar-right li a       color  blue

User · Answer

Make it the following    nav navbar-nav navbar-right li a       color  blue      The above will target the specific links  which is what you want  versus styling the entire list blue  which is what you were initially doing  Here is a JsFiddle   The other way would be creating another class and implementing it like so   HTML   lt li gt  lt a href     class  color-me  gt  lt span class  glyphicon glyphicon-list-alt  gt  lt  span gt  R amp eacute sum amp eacute  lt  a gt  lt  li gt    CSS   color-me      color blue      Also demonstrated in this JsFiddle

User · Answer

If you need to change the background colour of the navbar  you can do the following    lt nav class  navbar navbar-expand-lg navbar-light  style  background-color  e3f2fd  gt    And to change the text    lt a class  nav-link  href     style  color  ccc  gt

[html] Change navbar text color Bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to colors