Bootstrap 3 navbar active li not changing background-color

Question

I have added custom CSS for the active li element of navbar  But it seems to be picking the default color  Other colors such as navbar BG and text color seems to have changes properly   The modified CSS rules are as follows    navbar-default       background-color   7b431a      border-color   d65c14     navbar-default  navbar-brand       color   ffffff     navbar-default  navbar-brand hover   navbar-default  navbar-brand focus       color   8a0e0b     navbar-default  navbar-nav  gt  li  gt  a       color   ffffff     navbar-default  navbar-nav  gt  li  gt  a hover   navbar-default  navbar-nav  gt  li  gt  a focus       color   8a0e0b     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   8a0e0b      background-color   d65c14     navbar-default  navbar-nav  gt   open  gt  a   navbar-default  navbar-nav  gt   open  gt  a hover   navbar-default  navbar-nav  gt   open  gt  a focus       color   8a0e0b      background-color   d65c14     navbar-default  navbar-nav  gt   dropdown  gt  a  caret       border-top-color   ffffff      border-bottom-color   ffffff     navbar-default  navbar-nav  gt   dropdown  gt  a hover  caret   navbar-default  navbar-nav  gt   dropdown  gt  a focus  caret       border-top-color   8a0e0b      border-bottom-color   8a0e0b     navbar-default  navbar-nav  gt   open  gt  a  caret   navbar-default  navbar-nav  gt   open  gt  a hover  caret   navbar-default  navbar-nav  gt   open  gt  a focus  caret       border-top-color   8a0e0b      border-bottom-color   8a0e0b     navbar-default  navbar-toggle       border-color   d65c14     navbar-default  navbar-toggle hover   navbar-default  navbar-toggle focus       background-color   d65c14     navbar-default  navbar-toggle  icon-bar       background-color   ffffff      The HTML is    lt nav class  navbar navbar-default navbar-fixed-top  gt                   lt ul class  nav navbar-nav  gt                       lt li gt  lt a href     gt Home lt  a gt  lt  li gt                       lt li gt  lt a href     gt Poducts lt  a gt  lt  li gt                       lt li class  active  gt  lt a href     gt Gallery lt  a gt  lt  li gt                   lt  ul gt                lt  nav gt    The output navbar is as follows

User · Answer

In my own bootstrap css that I load after the bootstrap min css only that  switch of the background image with  important works for me    navbar-nav li a hover   navbar-nav  gt   active  gt  a     color   fff  important     background-color  f4511e  important    background-image  none  important

User · Answer

Well  I had a similar challenge  Using the inspect element tool in Firefox  I was able to trace the markup and the CSS used to style the link when clicked  On click  the list item  li  is given a class of  open and it s the anchor tag in the class that is formatted with the grey color background   To fix this  just add this to your stylesheet    nav  open  gt  a       background  759ad6         Put in styling

User · Answer

Did you include  bootstrap-theme css  files on your code   In  bootstrap-theme min css  files  background-image about   active  is existed for  navbar   check this screenshot  http   i imgur com 1etLIyY png    It will re-declare your style code  and then it will be effected on your code   So after you delete or re-declare them  background-image   you can use your background color style about the   active  tag

User · Answer

in my case just removing background-image from nav-bar item solved the problem   navbar-default  navbar-nav  gt   active  gt  a focus                           background-image  none

User · Answer

In Bootstrap 3 3 x make sure you use the scrollspy JavaScript capability to track active elements  It s easy to include it in your HTML  Just do the following    lt body data-spy  scroll  data-target  Id or class of the element you want to track  gt    In most cases I usually track active elements on my navbar  so I do the following    lt body data-spy  scroll  data-target   navbar-fixed-top   gt    Now in your CSS you can target  navbar-fixed-top  active a    navbar-fixed-top  active a           Put in some styling      This should work if you are tracking active li elements in your top fixed navigation bar

User · Answer

You need to add CSS to  active instead of  active a   Fiddle  http   jsfiddle net T5X6h 2   Something like this    navbar-default  navbar-nav  gt   active      color   000      background   d65c14     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   000      background   d65c14

[css] Bootstrap 3 navbar active li not changing background-color

Examples related to css

Examples related to twitter-bootstrap