2

Have added custom CSS for active li elements of navbar . But they seem to be picking the default black background color. I want to change its background color to #428BCA. Other elements of navbar are changing their colors according to the code.

My CSS code is as follows:

carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 850px;
}
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.navbar {
position:fixed;
top:0;
z-index:10;
width:100%;
background-color:black;
opacity: 0.9;
}
#nav-right>.active{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right li a {
color: #428BCA;
}
#nav-right li a:hover{
background-color: #428BCA;
color: white;
}
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus {
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
}
#drop-menu li a:hover {
background-image:none;
background-color:#16A170;
}
#drop-menu li a{
background-image:none;
color: black;
}

I am posting the fiddle to exactly state my problem:

https://jsfiddle.net/mukundm/d0Lhvc1z/24/

Please help me with this.

Mukund Mittal
  • 45
  • 9
  • Try this .navbar-inverse .navbar-nav > .active > a{background:#428BCA !important} – Nandhu Dec 05 '16 at 07:10
  • i can see :#428BCA as their background..can you give a correct snapshot of what your trying exactly – Geeky Dec 05 '16 at 07:12
  • @Nandhu, I tried this, the text color is changing but the background color is not changing. I am sorry I accidentally wrote color instead of background color.... Thanks for the advice by the way :) – Mukund Mittal Dec 05 '16 at 07:14

4 Answers4

0

Change in your bootstrap style as

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a{

    /* background-image: linear-gradient(to bottom, #080808 0px, #0f0f0f 100%);
    background-repeat: repeat-x;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25) inset; */
    color: #fff !important; 
    background: #428bca;
}
Anubhav pun
  • 1,323
  • 2
  • 8
  • 20
  • Hi Anubhav! Your solution is working but this also changes the background color of my active dropdown menu links. The CSS code, that I wrote for those dropdown links fails. – Mukund Mittal Dec 05 '16 at 07:37
0

please apply this code on your solution

li.active a{
   background: #428BCA!important;
   color:#fff!important;
 }
Santosh Khalse
  • 12,002
  • 3
  • 36
  • 36
0

Avoid important! It's just bad css practice. Instead add this:

#nav-right li.active a {
    background: #428BCA;
    color: white; }

PS: More on why not to use !important: What are the implications of using "!important" in CSS?

Community
  • 1
  • 1
Underfrog
  • 1,307
  • 11
  • 14
  • Hello Underfrog. Your solution is working but this also changes the background color of my active dropdown menu links. The CSS code, that I wrote for those dropdown links fails. – Mukund Mittal Dec 05 '16 at 07:42
0

You should give the css background property to the #nav-right > .active > a instead of #nav--right > .active in the css code. This is because bootstrap does not apply background property to the <li> element but instead it apllies it to the <a> element instead the <li> element. And when the link is made active then the active class is added to the <li> element. So your css code should be as follows:

carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 850px;
}
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.navbar {
position:fixed;
top:0;
z-index:10;
width:100%;
background-color:black;
opacity: 0.9;
}
/* Edited Style */
#nav-right>.active > a, #nav-right>.open>a{
background-image:none;
background-color: #428BCA;
color: white;
}
/* Edited style ends */
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right li a {
color: #428BCA;
}
#nav-right li a:hover{
background-color: #428BCA;
color: white;
}
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus {
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
}
#drop-menu li a:hover {
background-image:none;
background-color:#16A170;
}
#drop-menu li a{
background-image:none;
color: black;
}
Nishant Kumar
  • 71
  • 5
  • Hi Nishant! Your solution is working but this also changes the background color of my active dropdown menu links. The CSS code, that I wrote for those dropdown links fails. – Mukund Mittal Dec 05 '16 at 07:41
  • You have to style the class `#nav-right>.open>a` also. The open class is added in case the dropdown menu is opened in the nav links. Edited the answer so that you can test it. – Nishant Kumar Dec 05 '16 at 08:12
  • Moreover, when I hover on the dropdown link, it abides by the CSS code of dropdown menu – Mukund Mittal Dec 05 '16 at 10:26