Change nav-pills color

Change nav-pills color
0.0 0

#1

Hi all,
I am trying to change color the .nav-pills but it does not react anything. Please help.
Here is my codepen for the project.
Thanks,
AnT


#2

Can you explain in detail exactly color are you trying to change? The background color or the color of the font text? I see with the following CSS, you are targeting the anchor within the li elements whose parents have the “nav-pills” class and making the anchor’s background white. It seems to be doing what you ask.

However, since you applied an opacity of 0.5 to .navbar, the background is not going to appear white. Any children of the div with class=“navbar” are also going to have an opacity of 0.5. Try using the following for the .navbar definition:

background-color: rgba(248, 248, 255, 0.5);

#3

Hi @randelldawson,
I’m trying to change the color of the .nav-pills for the active link to black background and white text instead of blue background and black text.

I have changed .navbar definition in my codepen as you suggested:

.navbar {
  background-color: rgba(248, 248, 255, 0.5);
}

I’m trying to change color for .nav-pills as below:

.nav-pills > li > a, .nav-pills > li > > a:hover, .nav-pills > li > a:focus {
    background-color: black;
  color: white;
}

but still don’t know why it does not work.
Please help.
AnT


#4

I just randomly fixed the issue after messing with it a few more times :slight_smile: But there is another minor issue I am trying to make it right. I want to make the <h5> of the modal to be centered, and I have tried many options I can think of: .text-center, .justify-content-center, .mx-auto .d-block, and use text-align: center in the style.css, but the title of the modal still does not align centerly as I want. Please help.
Thanks,
AnT