Link color is not changing after adding a class with jQuery

Question

I am a beginner. I am trying to make a webpage. But I'm having a problem. I added a class with the help of jQuery so that the background color(white) of the navbar changes when scrolling. I also want to change the color of the link in the navbar so that it can be visible after adding the navbar background color(white) because the navbar links color is white. Scrolling changes the background color of the navbar but not the color of the link.

 $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 100) { $(".header-1").addClass("nav-color"); } else { $(".header-1").removeClass("nav-color"); } }); });

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; text-decoration: none;important: list-style; none: } a { color; #fff. }:x { border; 1px solid #fff. }:button { display; block: width; 180px: padding; 15px 20px: background; transparent: color; #fff: font-weight; bold: text-align; center: border; 2px solid #fff: border-radius; 30px: } header { background; green: /* I've used an image here */ height; 100vh: color; #fff: width; 100%. }:header-1 { position; fixed: width; 100%. } /* ============================ */ /* ======= jQuery class ======= */ /* ============================ */:nav-color { background; #fff. }:nav-color a { color; #000.important: } /* ============================ */ /* ============================ */ /* ============================ */;header-2 { height: 100vh; display: grid; place-items. center: };header-2-1 { width: 50%; text-align: center; margin. auto: };header-2-btn { margin. auto: } /* Bootstrap changed */;navbar a { color. #fff:important; }:navbar-toggler { color. #fff:important; } /* Responsive */ @media (max-width: 576px) {.header-2-1 { width: 95%;important: } } @media (max-width. 768px) {:header-2-1 { width; 90%:important; } } @media (max-width: 991px) {;header-1 { background. #fff: width; 100%.important: text-align; center; } .header-1 a { color: black !important; } .header-2-1 { width: 80% !important; } }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <header id="home"> <div class="header-1"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-transparent"> <div class="container-fluid"> <a class="navbar-brand" href="#">Dabananda Mitra</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link" href="#">Home</a> <a class="nav-link" href="#">About</a> <a class="nav-link" href="#">Services</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Reviews</a> <a class="nav-link" href="#">Portfolio</a> <a class="nav-link" href="#">Contact</a> </div> </div> </div> </nav> </div> </div> <div class="header-2 container"> <div class="header-2-1"> <h2>Welcome</h2> <h1 class="my-4">I'M A WEB DEVELOPER</h1> <p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni voluptates rerum laborum cum</p> <a href="#" class="button header-2-btn">DOWNLOAD CV</a> </div> </div> </header> <section> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor molestias rerum rem eveniet qui modi dignissimos illum, voluptates cum harum distinctio quaerat quidem a et, laboriosam vero. Dolor labore porro vel reiciendis saepe itaque, assumenda autem quas fugiat error cupiditate ipsam ducimus nesciunt adipisci? Atque obcaecati, nemo ab, doloremque laudantium fugit veritatis inventore dicta sit dolor unde. Ipsam repellendus voluptatum voluptas enim eos consequatur veniam ipsa maxime officiis odio quae animi fugiat, pariatur dolores quisquam deleniti qui adipisci assumenda, necessitatibus dolor similique. Accusantium vel dolores libero sint voluptate commodi et sunt consequatur doloremque totam. Exercitationem itaque consectetur unde eos iusto, Ab ex tempore quisquam similique animi rem reiciendis dolor error fugit odio consectetur voluptate incidunt quam soluta veniam. fuga rerum? Vel soluta obcaecati numquam veniam temporibus quia, Cum ullam alias ipsam, quibusdam aut totam officiis magnam cupiditate odio laudantium. fuga ipsum velit ex illum aspernatur doloremque impedit vitae illo maiores perspiciatis ratione, Ex hic quisquam quis odit debitis, architecto modi delectus deserunt tempore molestias officia a maiores rem eius consequuntur eaque at iure inventore animi expedita iste. harum cumque, Ut architecto recusandae eligendi facilis sed nemo sapiente. officiis ullam ad quasi accusantium culpa nihil optio incidunt, Ipsum vero reprehenderit laudantium non minima repellat iste consectetur nesciunt fugiat deleniti id sint asperiores vitae, minus, qui earum, Adipisci eveniet dolor, tempore repellat optio recusandae perspiciatis eos quas commodi animi, vitae voluptate maiores suscipit itaque. explicabo natus minima provident, Omnis, minima praesentium sit voluptatem amet quibusdam quo obcaecati iusto et asperiores exercitationem nostrum nulla eligendi? Nemo facere itaque odit labore reiciendis, porro rerum, consequatur tempore ipsam repudiandae id omnis quia ea optio corporis, Accusantium, porro eos cupiditate inventore deserunt ducimus saepe quam eveniet et excepturi sed voluptatem assumenda animi voluptatum consequuntur ut mollitia eius culpa possimus suscipit placeat soluta similique delectus provident? Debitis alias. illum obcaecati tempore aspernatur et eos soluta repellendus, nulla repudiandae aliquam accusamus quibusdam corrupti rem, Ipsum blanditiis eligendi vel quis dolore ullam cumque excepturi, Molestias id error possimus soluta eum laborum ratione alias sequi. blanditiis necessitatibus, Debitis officia quas accusamus ipsa? Fugiat doloremque, veniam cupiditate ad architecto enim ratione maiores velit officiis, corporis tempora eligendi? Vel quaerat dolor veniam hic earum dignissimos enim fuga est nulla architecto fugit porro tempora sapiente culpa provident eum cum deserunt officia, expedita molestiae iste. Doloremque, porro est, Nisi earum? modi repellendus minus reprehenderit at quia? quae consectetur laudantium delectus maiores, Ad quod autem voluptate ex mollitia illum ipsam fuga quaerat asperiores, dignissimos impedit doloremque aliquid dolorem tempore recusandae ea rem consectetur maiores, Vero sunt. consequuntur delectus provident possimus veniam fuga in iusto quos accusamus rem illum magni animi suscipit, Reiciendis magnam nulla deserunt maxime eveniet sapiente perferendis ad laborum autem in hic maiores quod, provident cumque sequi, Debitis esse quibusdam dolorum cum. Debitis, eos doloribus obcaecati commodi ipsam error? quam iure voluptatibus deserunt minima autem repellat ratione quibusdam voluptates quaerat iusto mollitia vel itaque aspernatur ab ut impedit quis magnam sint, Quasi mollitia doloremque iste aperiam incidunt obcaecati quos qui atque laudantium tempora distinctio quam? natus eum aspernatur eaque sunt aut? Fugiat aperiam saepe autem architecto fuga id, laborum error voluptatum aliquid magni eius iste. soluta rerum, doloribus atque maiores unde tempora a accusantium modi, Illum. voluptas, Laboriosam est laudantium dolore repudiandae maxime. reiciendis voluptate consequuntur, Iure velit et distinctio odio est saepe neque eum? Voluptatem placeat adipisci suscipit eaque quis nisi quas, Quam hic consectetur quasi, laborum maxime nulla cumque fugit at obcaecati. Deserunt rerum maxime provident aut ipsum reprehenderit magnam eius nemo aliquam earum quo molestiae, accusamus? voluptatem illo quasi, Fuga dolorum minus, rem officia aliquam debitis ad aut hic ut ratione, Possimus placeat nesciunt nihil? delectus magni unde minus, Nemo quaerat ipsa ratione sit pariatur quia qui veritatis dolor eius? corporis ea, harum dignissimos illum porro tenetur, Perferendis debitis nemo odit minima ipsam magni ullam itaque vero, rem repellendus dolorum odio iste libero officiis soluta harum quo incidunt. Dicta magni nulla suscipit voluptatibus itaque inventore consequatur odio aliquid, Suscipit, asperiores tenetur. Nesciunt vitae fugiat mollitia quod nulla quo, quas aperiam ex inventore veniam quis quos obcaecati unde optio culpa maxime, suscipit sunt repudiandae minima, Eveniet cum porro. sequi illo tempora iste ipsa nisi atque in earum eligendi eum? Unde ipsam explicabo alias quisquam esse delectus sunt dolore ea magni, sed nemo ut nisi. temporibus debitis, et non similique, Fuga quo minima sequi unde quisquam labore voluptatibus, excepturi aliquid tempore? qui officiis velit in, Iste. enim iure inventore eos. delectus reprehenderit culpa distinctio quos aperiam reiciendis. molestias labore, Quam dignissimos minus unde molestias, Voluptate quae ex dicta sit culpa, Atque quae, nobis aliquid culpa laborum laboriosam cum similique obcaecati consequatur repellendus natus corrupti quo tenetur qui molestias voluptatem. Cupiditate tempora mollitia commodi tenetur, praesentium? consectetur provident id maxime odit voluptas perspiciatis qui ipsam facere error voluptatem adipisci quisquam, dolorem similique harum modi laborum at. Aliquam, illo sequi nobis illum veritatis minima odio unde eveniet voluptatibus natus. Eos veniam voluptate id voluptates, Aliquam ea minima laborum magnam quaerat quibusdam fuga quas sed. Perspiciatis expedita quam hic autem, ipsam? quasi nihil nulla sed harum repellendus corporis laborum error odit quibusdam temporibus inventore nisi sunt veniam qui sapiente sint ipsa et quas, Magni praesentium? beatae, illum vel rem voluptas porro nulla commodi hic soluta laborum blanditiis atque nostrum natus, Earum accusamus eius veniam, aspernatur quis ad nisi voluptatum? Odit, voluptates dolorum. Alias, magni dolore assumenda repudiandae veniam ut fugiat quia nam fugit perferendis. Rerum corporis nobis amet natus alias! Nobis nostrum nemo excepturi doloribus temporibus consequuntur repellendus dignissimos rem voluptatum veritatis, similique labore optio facilis aliquid tenetur autem! Officia praesentium velit obcaecati maiores at. Exercitationem, rem asperiores maiores minima placeat veniam iure voluptatibus illum sint nihil neque sed incidunt numquam ratione obcaecati unde ipsa velit porro tempora quo perspiciatis sit corrupti quidem? Voluptate magnam, distinctio saepe hic amet adipisci atque reiciendis dicta aliquid nisi vero soluta ad aut animi? Omnis hic laborum eius quasi modi, inventore nesciunt, ut dicta fuga tempore recusandae aliquam autem dolores commodi cum magnam quisquam, unde velit exercitationem nostrum perspiciatis! </section>

How can I change the link color of navbar? Help me please.

Thank you.

Answer 1

Use the class like this:

.header-1.nav-color a {
  color: #000 !important;
}

instead of this:

.nav-color a {
  color: #000 !important;
}

where you add the jQuery classes.