title: Why my font color in navbar didn't change when i toggle to sticky?
body: <p>I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.</p>
  <p>Here's my what my initial navbar looks like
  <a href="https://i.stack.imgur.com/k1wjM.png" rel="nofollow noreferrer">initial navbar</a></p>
  <p>And here's scrolled navbar
  <a href="https://i.stack.imgur.com/tyWs6.png" rel="nofollow noreferrer">Scrolled Navbar</a>
  The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black</p>
  <p>Here's my HTML code:</p>
  <pre><code>&lt;header id='navbar'&gt;
    &lt;a href=&quot;#&quot; class=&quot;brand&quot;&gt;LOGO&lt;/a&gt;
    &lt;div class=&quot;menu&quot;&gt;
      &lt;div class=&quot;btn&quot;&gt;
        &lt;i class=&quot;fas fa-times close-btn&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;a href=&quot;#&quot;&gt;Jadi Partner&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;Lapangan Favorit&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;Pesanan Saya&lt;/a&gt;
      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;button class=&quot;dropbtn&quot;&gt;
          &lt;i class=&quot;fas fa-bars&quot; id=&quot;menu-dropdown&quot;&gt;&lt;/i&gt;&lt;i class=&quot;fas fa-user-circle&quot;&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;div class=&quot;dropdown-content&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Log In&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Sign Up&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;btn&quot;&gt;
      &lt;i class=&quot;fas fa-bars menu-btn&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
  
  &lt;/header&gt;
  
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    window.addEventListener('scroll', function () {
      // var header = document.querySelector('header');
      var header = document.querySelector('header');
      header.classList.toggle('sticky', window.scrollY &gt; 0);
    })
  &lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    //Javacript of responsive navigation menu
    const menuBtn = document.querySelector(&quot;.menu-btn&quot;);
    const navigation = document.querySelector(&quot;.navigation&quot;);
  
    menuBtn.addEventListener(&quot;click&quot;, () =&gt; {
      menuBtn.classList.toggle(&quot;active&quot;);
      navigation.classList.toggle(&quot;active&quot;);
    });
  
  &lt;/script&gt;
  </code></pre>
  <p>and this is the CSS part:</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: &quot;Poppins&quot;, sans-serif;
  }
  
  
  header{
      z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 100px;
    transition: 0.6s;
  }
  header.sticky {
      background: #ffffff;
    padding: 20px 100px;
  }
  
  
  header .brand{
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 2px;
    }
  
    header .menu{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    header .menu a{
      color: rgb(255, 255, 255);
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      margin: 0 30px;
      padding: 0 10px;
      border-radius: 20px;
      transition: 0.3s;
      transition-property: color, background;
    }
  
    header.sticky .menu a{
      color: black !important;
      z-index: 9999999;
    }
    
    header .menu a:hover{
      color: #000;
      background: #fff;
    }
  
    header .btn{
      color: #fff;
      font-size: 25px;
      cursor: pointer;
      display: none;
    }
  
  
  .dropdown {
      float: right;
      position: relative;
      /* overflow: hidden; */
      margin-left: 10px;
  }
  
  .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      font-family: inherit;
      margin-left: 20px;
      color: black;
      background-color: #fff;
      border-radius: 30px;
      padding: 0 3px;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      top: calc(100%);
      right: 0;
      background-color: #ffffff;
      max-width: 160px;
      /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
      z-index: 9999;
      border-radius: 10px;
  }
  
  .dropdown-content a {
      /* float: none; */
      color: black !important;
      margin: 5px 0 !important;
      padding: 6px 10px;
      min-width: 120px;
      text-decoration: none;
      display: inline-block;
      font-size: .8em !important;
      /* text-align: left; */
      /* overflow: hidden; */
  }
  
  .dropdown-content a:hover {
      background-color: rgb(212, 212, 212);
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  
  
  
  .navigation-items {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  
  
  header .navigation .navigation-items #profile-dropdown {
      color: black;
      background-color: #fff;
      border-radius: 30px;
      padding: 0 3px;
  }
  
  .dropbtn i {
      margin: 0 3px;
  }
  
  #menu-dropdown {
      font-size: .7em;
  }
  
  header ul li a:before {
      content: '';
      position: absolute;
      background: rgb(255, 255, 255);
      border-color: #000000;
      width: 0;
      height: 3px;
      bottom: 0;
      left: 0;
      transition: 0.3s ease;
  }
  
  header ul li a:hover:before {
      width: 100%;
  }
  </code></pre>
  <blockquote>
  <p>This part is edited
  I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:</p>
  </blockquote>
  <pre><code>&lt;section class=&quot;home&quot;&gt;
      &lt;div class=&quot;images-home&quot;&gt;
          &lt;img src=&quot;{% static 'main/images/basketball.jfif' %}&quot; alt=&quot;&quot; class=&quot;image-slide&quot;&gt;
          &lt;img src=&quot;{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}&quot; alt=&quot;&quot; class=&quot;image-slide&quot;&gt;
          &lt;img src=&quot;{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}&quot; alt=&quot;&quot; class=&quot;image-slide&quot;&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;content&quot;&gt;
          &lt;h1&gt;Train. Grow. Repeat.&lt;br&gt;&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
              nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!&lt;/p&gt;
          &lt;a href=&quot;#&quot;&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span&gt;&lt;/span&gt; Booking sekarang&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;slider-navigation&quot;&gt;
          &lt;div onclick=&quot;slider_nav(1)&quot; class=&quot;nav-btn&quot; id=&quot;radio1&quot;&gt;&lt;/div&gt;
          &lt;div onclick=&quot;slider_nav(2)&quot; class=&quot;nav-btn&quot; id=&quot;radio2&quot;&gt;&lt;/div&gt;
          &lt;div onclick=&quot;slider_nav(3)&quot; class=&quot;nav-btn&quot; id=&quot;radio3&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  <p>and here's CSS for background:</p>
  <pre><code>section {
      padding: 100px 200px;
  }
  
  .home {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      /* background: #267be9; */
      background: #ED1E1E;
  }
  
  .home:before {
      z-index: 777;
      content: '';
      position: absolute;
      /* background: rgba(62, 129, 245, 0.3); */
      background: rgba(212, 11, 11, 0.3);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }
  
  .home .content {
      z-index: 888;
      /* color: #fff; */
      color: #fff;
      width: 60%;
      margin: 50px 70px;
      position: absolute;
      left: 0%;
  }
  
  .home .content h1 {
      font-size: 3.5em;
      font-weight: 700;
      /* text-transform: uppercase; */
      letter-spacing: 5px;
      line-height: 75px;
      margin-bottom: 40px;
  }
  
  .home .content p {
      margin-bottom: 65px;
      max-width: 50%;
      /* font-size: 1.2vw; */
  }
  
  .home .content a {
      /* background: #fff; */
      width: 30%;
      background: #ED1E1E;
      padding: 15px 35px;
      /* color: #1680AC; */
      /* color: #ED1E1E; */
      color: #ffffff;
      /* font-size: 1.1em; */
      font-size: 1.4vw;
      font-weight: 500;
      text-decoration: none;
      text-transform: uppercase;
      position: relative;
      /* display: flex; */
  }
  
  .home .content a:hover {
      color: var(--main-color);
      background-color: #fff;
  }
  
  .home .content a span {
      display: block;
      position: absolute;
      background: var(--main-color);
  }
  
  .home .content a span:nth-child(1) {
      left: 0;
      bottom: 0;
      width: 2px;
      height: 100%;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.5s;
  }
  
  .home .content a:hover span:nth-child(1) {
      transform: scaleY(1);
      transform-origin: bottom;
      transition: transform 0.5s;
  }
  
  .home .content a span:nth-child(2) {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s;
  }
  
  .home .content a:hover span:nth-child(2) {
      transform: scaleX(1);
      transform-origin: left;
      transition: transform 0.5s;
  }
  
  .home .content a span:nth-child(3) {
      right: 0;
      bottom: 0;
      width: 2px;
      height: 100%;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.5s;
      transition-delay: 0.5s;
  }
  
  .home .content a:hover span:nth-child(3) {
      transform: scaleY(1);
      transform-origin: bottom;
      transition: transform 0.5s;
      transition-delay: 0.5s;
  }
  
  .home .content a span:nth-child(4) {
      left: 0;
      top: 0;
      width: 100%;
      height: 2px;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s;
      transition-delay: 0.5s;
  }
  
  .home .content a:hover span:nth-child(4) {
      transform: scaleX(1);
      transform-origin: left;
      transition: transform 0.5s;
      transition-delay: 0.5s;
  }
  
  .home img {
      z-index: 000;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .home .media-icons {
      z-index: 888;
      position: absolute;
      right: 30px;
      display: flex;
      flex-direction: column;
      transition: 0.5s ease;
  }
  
  .home .media-icons a {
      color: #fff;
      font-size: 1.6em;
      transition: 0.3s ease;
  }
  
  .home .media-icons a:not(:last-child) {
      margin-bottom: 20px;
  }
  
  .home .media-icons a:hover {
      transform: scale(1.3);
  }
  
  .slider-navigation {
      z-index: 888;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      /* transform: translateY(80px); */
      /* margin-bottom: 12px; */
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .slider-navigation .nav-btn {
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
      transition: 0.3s ease;
  }
  
  .slider-navigation .nav-btn:not(:last-child) {
      margin-right: 20px;
  }
  
  .slider-navigation .nav-btn:hover {
      transform: scale(1.2);
  }
  
  .slider-navigation .nav-btn.active {
      background: var(--main-color);
  }
  
  @media (max-width: 1040px) {
      section {
          padding: 100px 20px;
      }
      .home .content {
          margin: 0 20px;
      }
      .home .media-icons {
          right: 15px;
      }
      .home .content h1 {
          font-size: 4vw;
          line-height: 60px;
      }
      .home .content p {
          margin-bottom: 65px;
          max-width: 40%;
          font-size: 13px;
      }
  }
  
  @media (max-width: 560px) {
      .home .content {
          margin: 0 20px;
      }
      .home .content h1 {
          /* font-size: 2em; */
          line-height: 60px;
      }
      .home .content p {
          margin-bottom: 65px;
          max-width: 40%;
          font-size: 10px;
      }
      .home .content a {
          max-width: 10px;
          padding: 10px 25px;
      }
  }
  </code></pre>
  <p>I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)</p>