In Bootstrap, how do I change what color the links are in my navbar when hovering over them? - html

Question

Please help, it's driving me crazy (it's insane that I have spent so much time on the navbar text color overall).
I'm just learning web development so I just figured out how to change the text color in my navbar and now it turns an ugly blue when I hover over it. How do I figure out how to fix that?
I know others have asked this before but they all get specific answers that don't apply to my code and I don't understand why the solutions work, so I could figure it out by myself.
Thanks for your help!
<!--Navbar-->
<nav class="navbar navbar-expand-lg yellow lighten-3 fixed-top scrolling-navbar">
<div class="container">
<!--center the navbar content-->
<!-- Navbar brand -->
<a class="navbar-brand navbar-text-color-custom" href="#">Pawsitive Lead</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links - each sends you to the specific section of the page -->
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#intro">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#examples">Izkušnje</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#gallery">V razmislek</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#contact">Pišite nam</a>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Išči" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->

Answer 1

You can approach it by different ways ..
define a separate class in a separate css stylesheet and override the color by using !important :
e.g : make a class newClass in newCss.css
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
define a style tag in the html :
<style>
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
</style>
in HTML , put the class inside the anchor:
<li class="nav-item">
<a class=" newClass nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a></li>
By using !important you ensure that the css color red is applied to the anchor.