javascript - HTML Navbar Scroll Trigger can't get style and animation together

Question

Hey guys I have a little problem on my website for my school (http://609.sint-rembert.be/leerling05/). It is the next. I want to let the dropdown nav "Voorstelling" have the same scroll animation as the nav "Dossier Informatica" when clicked. But when I give "Voorstelling" the class "nav-link js-scroll-trigger" it does the animation but as you see on "Bedrijfstabel" and "Eerste contact" but the style and font are not the same as "Verslag1" under "Stageverslagen". Is there a way I can have the same style on the letters and have the animation? It should be having the animation as "Bedrijfstabel and Eerste contact" and the style as "Geschiedenis or verslag1".

See html and css below

<!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <div class="container">
                
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars ml-1"></i>
                </button>
                
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ml-auto">
                        
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Voorstelling</a>
                            <div class="dropdown-menu">
                        
                                    <a STYLE="color:#212529;" class="nav-link js-scroll-trigger" class="nav-link js-scroll-trigger" target="_self" href="#Bedrijfskaart">Bedrijfstabel</a>
                                    <a STYLE="color:#212529;" class="nav-link js-scroll-trigger" target="_self" href="#eerst">Eerste contact</a>
                                    <a STYLE="color:#212529;" class="dropdown-item" target="_self" href="#about">Geschiedenis</a>
                            </div>
                            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Bedrijfseconomie</a></li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Stageverslagen</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" target="_self" href="a/verslag1.html">Verslag 1</a>
                                    <a class="dropdown-item" target="_self" href="a/verslag2.html">Verslag 2</a>
                                    <a class="dropdown-item" target="_self" href="a/verslag3.html">Verslag 3</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" target="_self" href="#">Conclusie</a>
                            </div>
                        </li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Dossier&nbsp;Informatica</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="frans.html">L'entreprise</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Webtoepassing</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Bronnen</a></li>
                    </ul> 
                </div>
            </div>
        </nav>

CSS:

dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #fed136;
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

question from:https://stackoverflow.com/questions/65845494/html-navbar-scroll-trigger-cant-get-style-and-animation-together

Answer 1

you use the "class" attribute in multiple time in one element class="nav-link js-scroll-trigger" class="nav-link js-scroll-trigger"

use it at a one time in one element.

Geschiedenis here is not use js-scroll-trigger