Search code examples
htmlcssmdbootstrap

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

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-->
Solution

  • You can approach it by different ways ..

    1. 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*/
}
    1. 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.