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/[email protected]/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/[email protected]/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.

you set 2 important ruled colors on the a's. line 68 by class .nav-color a{} and at line 90 by class .navbar a , the white one is added later in the css, making it overrule the #000 styling at line 68. only use the !important rule when necessary. that will prevent issues like this — Ramon de Vries
– Ramon de Vries, Commented Jun 3, 2021 at 11:14
To expand on the above, make rules that you want to override others more specific instead of relying on the !important hack. Eg. change .nav-color {} to something like #home div .nav-color {} — Rory McCrossan
– Rory McCrossan, Commented Jun 3, 2021 at 11:19

biberman · Accepted Answer · 2021-06-03 11:47:04Z

2

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.

edited Jun 3, 2021 at 11:47

biberman

5,7794 gold badges16 silver badges39 bronze badges

answered Jun 3, 2021 at 11:44

Toqeer Haider

865 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Munna Tripathi Over a year ago

Sir, can you please tell me what is the deference between .header-1.nav-color a and .header-1 .nav-color a ?

Toqeer Haider Over a year ago

when you use ` .header-1.nav-color a` its works where header-1 class and nav-color class are together I mean on the same Attribute and then there child a. Else if you use with space-like .header-1 .nav-color a its work at a header-1 child class nav-color and its child a

Collectives™ on Stack Overflow

Link color is not changing after adding a class with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related