Change bootstrap "nav" color?


I’m struggling to change the background-color on my bootstrap nav using css. I’ve added the class “nav-bar-light” then tried to customize like the documentation says. I’ve tried assigning an id and altering that in css to no-avail. Does anyone have any ideas why I’m running into this issue?

Also, can anyone explain to me how to change the “active” class when a person scrolls to one of the other sections of the page? i.e. “portfolio” or “contact”

While you’re there any helpful feedback is much appreciated.

Here’s a link to my project.

And here’s a link to page I’m modeling mine after.

Again any advice will be greatly appreciated. Thanks!

Hey. To change the navbar color first remove bootstrap CSS from your HTML panel (also remove any html, head or body tags); by having it there, you are basically loading it after your styling (therefore overriding it); the HTML panel is your <body>.
Then, target the .navbar-default class instead of the nav element and the background-color should apply correctly.

As for the active status of the navbar’s links, check out the Bootstrap’s Scrollspy plugin. If you can’t figure it out by yourself then ask again!

So are you saying I shouldn’t be using bootstrap in order to style it?

You should add boostrap (and any other scripts you may want to add) from the pen settings (I thought I wrote that but hey, guess not; sorry!).

Hey there. Let’s go through your first issue. The reason your css is not getting applied is .navbar-default in your nav. It defines the following properties:

background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);
background-color: #f8f8f8;

This applies a gradient through background-image, and if gradients are not supported by the browser, it falls back to background-color instead. So, no matter how or where you apply background-color, the background-image definition preceeds that.

Additionaly, read about CSS Specificity. Even if background-image wasn’t defined, you’d need to either overwrite background-color in .navbar-default, or use your #topnav id. I am mentioning this because you use

nav {

in your code, which has lower specifity than .navbar-default.

There are various solutions to your problem. You can overwrite the values of .navbar-default as @noyb suggested but make sure to remove the background-image as well by setting it to none or you can remove .navbar-default completely (you’ll miss some shadows and the border color in this case).

Sorry for hijacking, I was already typing an answer when he replied, I am just adding info about the problem.


All good, the more the better!

Thanks! Changing the background-color of navbar-default solved the first problem. I forgot they mentioned to load bootstrap thru the settings.

However, I’ve been working on implementing the scrollspy to no avail. I cannot seem to get it. So if you can help with that it will be greatly appreciated.

I also appreciated your feedback as well. I wouldn’t have known to change the background-image on the navbar-default without your help. It worked without changing it but, who knows what other issues I could’ve run into later. To find the properties of navbar-default did you look at the documentation or inspect the element?

Hey. I watched your pen again. To have the Scrollspy plugin working you’ll need to add jQuery and the Bootstrap JS file from your pen settings (jQuery first, then Bootstrap; the latter depends on the former).

Also, as I suggested in the previous post, you should remove any html\head and body tags. You can add your custom font in the pen settings as well and you can use jQuery (like you were already doing) to initialize the Scrollspy plugin.

Don’t forget to add an href to your first nav <li>.

1 Like

Oh ok. Silly me. I’ll try this and see what happens. Was I implementing correctly otherwise?

Sure, everything was fine. You just forgot the two scripts.