Why my font color in navbar didn't change when i toggle to sticky?-CodePudding

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.

Here's my what my initial navbar looks like initial navbar

And here's scrolled navbar Scrolled Navbar 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

Here's my HTML code:

<header id='navbar'>
  <a href="#" >LOGO</a>
  <div >
    <div >
      <i ></i>
    </div>
    <a href="#">Jadi Partner</a>
    <a href="#">Lapangan Favorit</a>
    <a href="#">Pesanan Saya</a>
    <div >
      <button >
        <i  id="menu-dropdown"></i><i ></i>
      </button>
      <div >
        <a href="#">Log In</a>
        <a href="#">Sign Up</a>
      </div>
    </div>
  </div>
  <div >
    <i ></i>
  </div>

</header>


<script type="text/javascript">
  window.addEventListener('scroll', function () {
    // var header = document.querySelector('header');
    var header = document.querySelector('header');
    header.classList.toggle('sticky', window.scrollY > 0);
  })
</script>

<script type="text/javascript">
  //Javacript of responsive navigation menu
  const menuBtn = document.querySelector(".menu-btn");
  const navigation = document.querySelector(".navigation");

  menuBtn.addEventListener("click", () => {
    menuBtn.classList.toggle("active");
    navigation.classList.toggle("active");
  });

</script>

and this is the CSS part:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", 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%;
}

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:

<section >
    <div >
        <img src="{% static 'main/images/basketball.jfif' %}" alt="" >
        <img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" >
        <img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" >
    </div>

    <div >
        <h1>Train. Grow. Repeat.<br></h1>
        <p>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!</p>
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span> Booking sekarang</a>
    </div>

    <div >
        <div onclick="slider_nav(1)"  id="radio1"></div>
        <div onclick="slider_nav(2)"  id="radio2"></div>
        <div onclick="slider_nav(3)"  id="radio3"></div>
    </div>

</section>

and here's CSS for background:

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;
    }
}

I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)

CodePudding user response：

You need to add background-color and color property to the header selector not header .sticky.

As you're dynamically adding the sticky class, so at first render the colors are not actually visible.

UPDATE

Checked your codepen and you're missing the property when .sticky class is applied via JS

header.sticky .dropdown .dropbtn {
    background-color: #000;
}

header.sticky .brand{
    color: #000;
  }