I'm trying to do a scrollspy like in the bootstrap documentation but I have a little problem with hover. In code you can see i have add hover in cyan color I need for when you down in section it's hover in navbar in name of section, exemple : if you are in contact it's hove where writing contact in navbar
.navbar-nav .nav-item .nav-link:hover {
// color: cyan;
// box-shadow: inset 0 -2.5px 0 0 cyan;
// }
// .nav-item a:hover {
// color: cyan;
// box-shadow: inset 0 -2.5px 0 0 cyan;
// }
<body>
<nav style="padding: 1%;">
<div >
<a href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" >
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#scrollspyHeading1">Home</a>
</li>
<li >
<a href="#scrollspyHeading2">Services</a>
</li>
<li >
<a href="#scrollspyHeading3">Compétences</a>
</li>
<li >
<a href="#scrollspyHeading4">Portfolio</a>
</li>
<li >
<a href="#scrollspyHeading6">À Propos</a>
</li>
<li >
<a href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
data-bs-smooth-scroll="true" tabindex="0">
<div id="carouselExampleFade" data-bs-ride="carousel">
<div id="scrollspyHeading1">
<div data-bs-interval="10000">
<img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"
style="filter: brightness(10%);" alt="...">
<div
>
<h1 >Portfolio</h1><br>
<h1 style="font-size: 90px;">Développeur Web Indépendant</h1>
</div>
</div>
<div >
<img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg"
style="filter: brightness(10%);" alt="...">
<div
>
<h1 >Création de sites web </h1><br>
<h1 > vitrine, e-commerce, forum et autres</h1>
</div>
</div>
<div data-bs-interval="10000">
<img src="images/10705380.jpg" style="filter: brightness(10%);" alt="...">
<div
>
<h1 >Web design, conception graphiques, </h1> </br>
<h1 >Logos plaquettes publicitaire, cartes de visites,
newsletters</h1>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleFade"
data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleFade"
data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
<section style="padding-top: 4%;" id="scrollspyHeading2">
<div >
<h1 >
<span></span>
<span></span>
<span></span>
<span></span> MES SERVICES
</h1>
<h3 style="color: rgb(117, 111, 111);">Des prestations adaptées à vos besoins</h3>
</div>
<div >
<div >
<div >
<div >
<div >
<h5 >Gestion de projets web</h5>
<p >Site vitrine, corporate, évènementiel, e-commerce, intranet,
application
mobile.
</p>
</div>
<div >
<i ></i>
</div>
<div >
<h5 >Intégration Web</h5>
<p >Des intégrations (X)HTML / CSS respectueuses des standards du Web.
</p>
</div>
<div >
<i ></i>
</div>
<div >
<h5 >Développements spécifiques</h5>
<p >Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
</div>
<div >
<i ></i>
</div>
<div >
<h5 >Référencement naturel</h5>
<p >Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div >
<i ><img
src="images/5902216.png" alt="" style="width: 100%;"></i>
</div>
</div>
</div>
<div >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<div >
<div >
<i ><img
src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
alt="" style="width: 100%;"></i>
</div>
<div >
<h5 >Conception graphique & Webdesign</h5>
<p >Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
</div>
<div >
<i ><img src="images/3938579.png" alt=""
style="width: 100%;"></i>
</div>
<div >
<h5 >Dynamisme des pages</h5>
<p >Des animations de contenu non intrusives
pour embellir votre projet.</p>
</div>
<div >
<i ><img src="images/2739572-200.png" alt=""
style="width: 100%;"></i>
</div>
<div >
<h5 >Interface d'administration</h5>
<p >Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
</div>
<div >
<i ><img src="images/1027666.png" alt=""
style="width: 100%;"></i>
</div>
<div >
<h5 >Responsive design</h5>
<p >Compatible tous supports, tablette & application mobile.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393785.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h4 style="color: white;">Compatible Mobile, Tablettes & P.C</h4>
<h1 style="color: white;">Développement Web Responsive</h1>
</div>
</div>
</div>
</div>
<div id="scrollspyHeading3">
<h1 style="padding-top: 4%;">
<span></span>
<span></span>
<span></span>
<span></span> MES COMPÉTENCES
</h1>
<h3 style="color: rgb(117, 111, 111);">Des compétences à votre service</h3>
<div >
<div >
<div >
<h4>Domaines de compétences</h4>
<h6><i style="padding-right: 1%;"></i> Gestion de projets web
</h6>
<p style="font-style: italic;">Site vitrine, corporate, évènementiel, e-commerce, intranet,
application
mobile.</p>
<h6> <i style="padding-right: 1%;"></i>Conception graphique &
Webdesign </h6>
<p style="font-style: italic;">Logos, templates Web, plaquettes publicitaires, cartes de visite,
newsletters...</p>
<h6><i style="padding-right: 1%;"></i>Applications spécifiques
et
Interface d'administration</h6>
<p style="font-style: italic;">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>
<h6><i style="padding-right: 1%;"></i>Mise en place /
Modification
/ Gestion de CMS</h6>
<p style="font-style: italic;">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>
<h6><i style="padding-right: 1%;"></i>Intégration (X)HTML / CSS
</h6>
<p style="font-style: italic;">Codage à la main respectueux des standards du Web</p>
<h6> <i style="padding-right: 1%;"></i>Dynamise des pages par
JavaScript / AJAX </h6>
<p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p>
<h6><i style="padding-right: 1%;"></i>Validation W3C, WAI &
référencement naturel SEO</h6>
<p style="font-style: italic;"> Accessibilité & ergonomie des pages web </p>
<h6><i style="padding-right: 1%;"></i> Conception
multi-plateformes
</h6>
<p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p>
</div>
<div >
<h1>Compétences en développement</h1>
<div >
<div >
<div >
<span>HTML/CSS</span>
</div>
<div ><span></span></div>
</div>
<div >
<div >
<span>JAVASCRIPT/JQUERY</span>
</div>
<div ><span></span></div>
</div>
<div >
<div >
<span>PHP</span>
</div>
<div ><span></span></div>
</div>
<div >
<div >
<span>laravel</span>
</div>
<div ><span></span></div>
</div>
<div >
<div >
<span>MYSQL</span>
</div>
<div ><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scrollspyHeading4">
<h1 style="padding-top: 4%;">
<span></span>
<span></span>
<span></span>
<span></span> MES PROJETS
</h1>
<h4 style="color: rgb(117, 111, 111);">Une partie des projets sur lesquels j'ai travaillé</h4>
</div>
<div >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(521120.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h1 style="color: white;"> PME, associations ou particuliers,
je réponds à vos besoins en développement web </h1>
</div>
</div>
</div>
</div>
</br>
<div id="scrollspyHeading6">
<h1 style="padding-top: 4%;">
<span></span>
<span></span>
<span></span>
<span></span> À PROPOS
</h1>
<h4 style="color: rgb(117, 111, 111);">Je suis développeur web freelance et j'aime ça !</h4>
<div >
<div >
<h4 >Un développeur web passionné !</h4>
<p >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 >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<h4 >Expérience en développement</h4>
<p > 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 >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 >Un tarif adapté à votre projet</h3>
<p > 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 >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393769.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h1 style="color: white;"> Un interlocuteur unique pour un site internet
réussi
!
</h1>
</div>
</div>
</div>
</div>
<div id="scrollspyHeading7">
<h1 style="padding-top: 4%;">
<span></span>
<span></span>
<span></span>
<span></span> <b>CONTACTEZ-MOI</b>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</body>
</html>I tried to make a scrollspy that works like in the bootstrap docs but it doesn't with me. I would like that when I'm in a section there are hover in cyan color that works in the navbar but I can't do it. What's the problem? In this https://testportfolio111.000webhostapp.com/ link i have hosted you can see result
CodePudding user response：
Add in your CSS and try
.navbar-nav .nav-item .nav-link.active{
color: cyan;
box-shadow: inset 0 -2.5px 0 0 cyan;
}