javascript – bootstrap 5 link hover color doesn’t work

I’m trying to do so that when you pass with the mouse over the links the text of the navbar its color changes and border bottom, border bottom worked but i don’t understand why color text doesn’t change

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
   <title>Savinov Denis</title>
</head>

<body>
   <nav class="navbar navbar-expand-lg fixed-top navbar-custom">
       <div class="container">
           <a class="navbar-brand" href="#">
               <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
           </a>

           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
               aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>

           <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
               <ul class="navbar-nav justify-content-center">
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading1">Home</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading2">Services</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                   </li>

                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                   </li>
               </ul>
           </div>
       </div>
   </nav>


   <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
       <div class="carousel-inner">
           <div class="carousel-item active">
               <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100"
                   style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5>SAVINOV Denis</h5>
                   <p>Développeur Web Indépendant</p>
               </div>
           </div>
           <div class="carousel-item">
               <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100"
                   style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5 class="text-center">Création de sites web</h5>
                   <p class="text-center">Site vitrine, e-commerce, forum et autres</p>
               </div>
           </div>
           <div class="carousel-item">
               <img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5 class="text-center">Web design, conception graphiques</h5>
                   <p class="text-center">Logos, plaquettes publicitaire, cartes de visites,
                       newsletters</p>
               </div>
           </div>
       </div>
       <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Previous</span>
       </button>
       <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Next</span>
       </button>
   </div>
   <div class="container text-center" href="scrollspyHeading1">
       <h1>MES SERVICES</h1>
       <h3>Des prestations adaptées à vos besoins</h3>
   </div>
   <div class="container text-center" href="scrollspyHeading2">
       <div class="row">
           <div class="col">
               <h5 class="text-end">Gestion de projets web</h5>
               
               <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
               <h5 class="text-end">Intégration Web</h5>
               <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
               <h5 class="text-end">Développements spécifiques</h5>
               <p class="text-end">Des outils adaptés à votre coeur de métier,
                   applications & solutions personnalisées.</p>
               <h5 class="text-end">Référencement naturel</h5>
               <p class="text-end">Affichage sémantique des informations,
                   des pages propres pour un référencement optimal.</p>
           </div>
           <div class="col">
               <img src="images/index.jpeg" class="d-block w-100" alt="...">
           </div>
           <div class="col">
               <h5 class="text-start">Conception graphique & Webdesign</h5>
               <p class="text-start">Logos, templates Web, plaquettes publicitaires,
                   cartes de visite, newsletters...</p>
               <h5 class="text-start">Dynamisme des pages</h5>
               <p class="text-start">Des animations de contenu non intrusives
                   pour embellir votre projet.</p>
               <h5 class="text-start">Interface d'administration</h5>
               <p class="text-start">Outils spécifiques au bon fonctionnement
                   de votre entreprise.</p>
               <h5 class="text-start">Responsive design</h5>
               <p class="text-start">Compatible tous supports, tablette & application mobile.</p>
           </div>
       </div>

       <p>Compatible Mobile, Tablettes & P.C</p>
       <h3>Développement Web Responsive</h3>
   </div>

   <div class="container text-center" href="scrollspyHeading3">
       <h1>MES COMPÉTENCES</h1>
       <h3>Des compétences à votre service</h3>
       <div class="container text-center">
           <div class="row">
               <div class="col">
                   <h1 class="text-start">Domaines de compétences</h1>
                   <h4 class="text-start"> Gestion de projets web </h4>
                   <p class="text-start">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
                       mobile.</p>

                   <h4 class="text-start"> Conception graphique & Webdesign </h4>
                   <p class="text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite,
                       newsletters...</p>

                   <h4 class="text-start">Applications spécifiques et Interface d'administration</h4>
                   <p class="text-start">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>

                   <h4 class="text-start">Mise en place / Modification / Gestion de CMS</h4>
                   <p class="text-start">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>

                   <h4 class="text-start">Intégration (X)HTML / CSS</h4>
                   <p class="text-start">Codage à la main respectueux des standards du Web</p>

                   <h4 class="text-start"> Dynamise des pages par JavaScript / AJAX </h4>
                   <p class="text-start">jQuery, Prototype, Mootools, Scriptaculous</p>

                   <h4 class="text-start">Validation W3C, WAI & référencement naturel SEO</h4>
                   <p class="text-start"> Accessibilité & ergonomie des pages web </p>

                   <h4 class="text-start"> Conception multi-plateformes </h4>
                   <p class="text-start">Compatible tous supports, tablette & application mobile</p>
               </div>

               <div class="col">
                   <h1>Compétences en développement</h1>
                   <h1>Compétences en conception graphique</h1>
               </div>

               <h1 class="text-center">Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
           </div>
       </div>
   </div>

   <div class="container text-center" href="scrollspyHeading4">
       <h1>MES PROJETS</h1>
       <h4>Une partie des projets sur lesquels j'ai travaillé</h4>
   </div>

   <div class="container text-center" href="scrollspyHeading6">
       <h1>À PROPOS</h1>
       <h4>Je suis développeur web freelance et j'aime ça !</h4>
       <div class="row">
           <div class="col">
               <h4 class="text-start">Un développeur web passionné !</h4>
               <p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement
                   radical de cursus
                   afin de pouvoir pleinement l'exploiter.</br> </br>

                   Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                   divers projets développés.</br> </br>

                   En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                   développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un plus
                   large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
           </div>

           <div class="col">
               <img src="images/index.jpeg" class="d-block w-100" alt="...">
           </div>

           <div class="col">

               <h4 class="text-start">Expérience en développement</h4>

               <p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les
                   attentes d'un client
                   et de
                   répondre précisement au besoin demandé en fonction du domaine d'activité.</p>

               <p class="text-start">Du site vitrine au projet plus complexe, je vous propose une expertise et un
                   développement web qui
                   correspond à vos attentes & à vos besoins.</p>

               <h3 class="text-start">Un tarif adapté à votre projet</h3>

               <p class="text-start"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous
                   propose des solutions
                   à
                   votre portée & adaptée à votre budget.</p>

           </div>
       </div>
   </div>

   <div class="container text-center" href="scrollspyHeading7">
       <h1>CONTACTEZ-MOI</h1>
       <h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>

       <div class="row">
           <div class="col text-start">
               <h6>ADRESSE</h6>
               <p>45, allée des Grives 83390 Cuers</p>
               <h6>Téléphone</h6>
               <p>(+33) 6.15.42.10.45</p>
               <h6>E-mail</h6>
               <p>contact@mcrevoulin.com</p>
               <h6>Horaires</h6>
               <p>Lundi - Vendredi

                   09H00 - 18H00</p>
               <h6>S.I.R.E.N</h6>
               <p>522 491 000</p>
           </div>
           <div class="col">
               <iframe
                   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954505828!2d7.69203969606045!3d48.56905316140801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStra%C3%9Fburg%2C%20Frankreich!5e0!3m2!1sde!2sde!4v1658941325979!5m2!1sde!2sde"
                   width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                   referrerpolicy="no-referrer-when-downgrade"></iframe>
               <iframe
                   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
                   width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                   referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
           <div class="col">
               Column
           </div>
       </div>

   </div>


   <script src="js/javascript.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
       crossorigin="anonymous"></script>
</body>

</html>

CSS

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
/* Modify the background color */
.navbar-custom {
  background-color: rgba(255, 255, 255, 0.37);
}

.navbar-nav .nav-item .nav-link {

  color: white;

}



.nav-item a:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan; 
}


.carousel-inner .carousel-item>img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s;
}

@keyframes thing {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.5, 1.5);
  }
}

But it does not work I do not understand why, it seems to me that the code is correct but when I pass on the links of the navbar the hover to change colors does not work. What should I do to fix this code issue? I have try code from others topic but don’t resolved my problem

Leave a Comment