Change bootstrap navbar background color and font color

Question

I want to change the background and text color in a bootstrap navbar but it s not changing as expected    Here is my custom CSS    navbar-default  navbar-fnt       color   FFFFFF     navbar-default  navbar-backgrnd       color   CC3333      And the relevant HTML    lt div id  menu  class  navbar navbar-default navbar-fnt navbar-backgrnd  gt       lt div class  navbar-header  gt           lt div class  collapse navbar-collapse  gt                ul and li          lt  div gt       lt  div gt   lt  div gt    I can t figure out why this won t change the background and text-color - can anyone help

User · Answer

No need for the specificity  navbar-default in your CSS  Background color requires background-color  cc333333  or just background  cc3333   Finally  probably best to consolidate all your customizations into a single class  as below    navbar-custom       color   FFFFFF      background-color   CC3333           lt div id  menu  class  navbar navbar-default navbar-custom  gt    Example  http   www bootply com OusJAAvFqR

User · Answer

Most likely these classes are already defined by Bootstrap  make sure that your CSS file that you want to override the classes with is called AFTER the Bootstrap CSS    lt link rel  stylesheet  href  css bootstrap css    gt   lt  -- Call Bootstrap first -- gt   lt link rel  stylesheet  href  css bootstrap-override css    gt   lt  -- Call override CSS second -- gt    Otherwise  you can put  important at the end of your CSS like this  color  ffffff important  but I would advise against using  important at all costs

User · Answer

I have successfully styled my Bootstrap navbar using the following CSS  Also you didn t define any font in your CSS so that s why the font isn t changing  The site for which this CSS is used can be found here    navbar-default  navbar-nav  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  a focus       color   000    Sets the text hover color on navbar       navbar-default  navbar-nav  gt   active  gt  a   navbar-default  navbar-nav  gt   active  gt          a hover   navbar-default  navbar-nav  gt   active  gt  a focus       color  white    BACKGROUND color for active       background-color   030033      navbar-default       background-color   0f006f      border-color   030033      dropdown-menu  gt  li  gt  a hover   dropdown-menu  gt  li  gt  a focus       color   262626      text-decoration  none      background-color   66CCFF    change color of links in drop down here       nav  gt  li  gt  a hover   nav  gt  li  gt  a focus       text-decoration  none      background-color  silver    Change rollover cell color here       navbar-default  navbar-nav  gt  li  gt  a       color  white    Change active text color here

[css] Change bootstrap navbar background color and font color

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3