change color of navbar nav-item

How do I change the color of the "active" nav-item ? I can change all items by adding this to styles.css:

a {
  background-color: #97e6eb;
  color: #000000;

It also works if I modify the html, as in: ( I added the * because this forum editor was stripping out the clause, otherwise )

<a href="index.html" *style=`background-color:#97363b; color:#000000"`>Home</a>

But, I'd really like to do this right with a new style that will transcend all pages. I've tried this, and various other css combinations, but there is no effect:

.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
  background-color: #97e6eb;
  color: #000000;

I don't think I've changed the css files created by BS, although I'm not sure how to verify that. Thanks.

I don't wanna sound negative or something to you, but you should learn basics before coming to use bss and overall. If i wont forget i will edit this comment later and will show u, but i dont promise that i will remember. The main problem is that u dont know basics and ure doing it all wrong.

Thanks DK for being tactful. If you can provide an appropriate method, I'd appreciate. I have tried to learn the basics but I'm finding that almost everything is presented by video and I have a great deal of trouble following videos; text works so much better for me. So, my foundations are somewhat sketchy.

There are a ton of books out there that teach HTML and CSS, and many of them are pretty good. Check with anyplace like or and you should find a lot of them. You can also find lots of free tutorials out there if you do some good Google searching for HTML Tutorials or CSS Tutorials.

The first place I'd go to is which is the very first link you get when you do a search for HTML tutorials. These are all in text as well as visual examples and playgrounds.

Hope that helps!

Thanks, Jo. I'm not looking for CSS & HTML basics, rather Bootstrap Studio basics.

Well sounds more like Bootstrap basics is what might be needed to me. I don't know your knowledge level so forgive me if I'm wrong here, but Bootstrap handles things in specific ways, especially for navigation, so you may want to go through the Bootstrap tutorials both on the w3schools site and the Bootstrap site (w3schools has a Bootstrap section as well). That might help you for finding just what you need to edit for things within the app. :)

Jo, thanks. W3Schools is, for me, generally a pretty good place to start. I hadn't discovered that B.S. was covered there. Thanks !

Your last css example will work if you go to your navbar and set "Smart Active State" to on. Then just make sure each of your nav-links has the URL set to the correct pages you have created. You will want to make sure you also use "Paste Linked" when copying the navbar to each page.

Hello forum, I have been trying to read through the documentation and forum posts to solve my navbar issue. I have tried a lot of different classes and jQuery's. No Luck.

Here is my problem. On my current page listed below the navbar does not highlight the current selected page. "Home" is always #FFF. Hover works, but I can not seem to make the current page be highlighted in the navbar. I've tried to do the work on my own, but I am stuck. Ant help would be greatly appreciated. Here is my current portfolio page. All the links works correctly, but "home" always remains highlighted in the navbar.

Thank you,

Jeffrey Hill.