fixed scrolling navbar

.top-nav-collapse is not working on the MDB free version. I know that this class is added via JS, but maybe something is broken with the code. How do I fix this? html <!-- Main navigation --> <header> <!-- Navbar --> <navclass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> <divclass="container"> <aclass="navbar-brand"href="#"> <imgsrc="./assets/images-videos/circuit (1).png"> </a> <buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="#navbarTogglerDemo02" aria-expanded="false"aria-label="Toggle navigation"> <spanclass="navbar-toggler-icon"></span> </button> <divclass="collapse navbar-collapse"id="#navbarTogglerDemo02"> <ulclass="navbar-nav mr-auto smooth-scroll"> <liclass="nav-item"> <aclass="nav-link"href="#home">Home <spanclass="sr-only">(current)</span> </a> </li> <liclass="nav-item"> <aclass="nav-link"href="#about"data-offset="90">About</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#portfolio"data-offset="90">Projects</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#contact"data-offset="90">Contact</a> </li> </ul> <!-- Social Icon --> <ulclass="navbar-nav nav-flex-icons"> <liclass="nav-item"> <aclass="nav-link"> <iclass="fa fa-linkedin white-text"></i> </a> </li> <liclass="nav-item"> <aclass="nav-link"> <iclass="fa fa-github white-text"></i> </a> </li> <liclass="nav-item"> <aclass="nav-link"> <iclass="fa fa-facebook white-text"></i> </a> </li> </ul> </div> </div> </nav> <!-- Navbar --> <!-- Full Page Intro --> <divclass="view"> <videoclass="video-intro"poster="https://mdbcdn.b-cdn.net/img/Photos/Others/background.jpg"playsinlineautoplaymutedloop> <sourcesrc="./assets/images-videos/powerful-energy-core_zk1z_tzzs__D.mp4"type="video/mp4"> </video> <!-- Mask & flexbox options--> <divclass="mask rgba-gradient d-flex justify-content-center align-items-center"> <!-- Content --> <divclass="container px-md-3 px-sm-0"> <!--Grid row--> <divclass="row wow fadeIn"> <!--Grid column--> <divclass="col-md-12 mb-4 white-text text-center main-heading"> <h3class="display-3 mb-0 pt-md-5 pt-5 wow slideInRight">Brandon <aclass="amber-text"> Matthews</a> </h3> <hrclass="hr-light my-4 w-75"> <h4class="subtext-header mt-2 mb-4 wow slideInLeft">Designer | Developer | Diligent.</h4> <ahref="#!"class="btn btn-lg btn-rounded btn-outline-amber waves-effect white-text wow slideInUp"> View Projects </a> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- Content --> </div> <!-- Mask & flexbox options--> </div> <!-- Full Page Intro --> </header> css /* Required for full background image */ html, body, header, .view { height: 100%; } @media (max-width: 740px) { html, body, header, .view { height: 100vh; } } .top-nav-collapse { background-color: black!important; } .navbar:not(.top-nav-collapse) { background: transparent!important; } @media (max-width: 768px) { .navbar:not(.top-nav-collapse) { background: black!important; } } @media (min-width: 800px) and (max-width: 850px) { .navbar:not(.top-nav-collapse) { background: black!important; } } .rgba-gradient { background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); background: linear-gradient(to45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); }

---