Question 45808 in CSS Question posted in
Some basic documentation can be found here.

Color of the button "Kolonie" typography stays the same even after changing it many times – CSS

So i tried changing it from #E3CC82 to #1F1F1F but it just wont let me. Tried many things, as well as putting it into chatgpt. Nothing.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Roboto", sans-serif;
      overflow-y: auto;
    }

    .navbar .menu-items ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      list-style: none;
    }

    .navbar .menu-items ul a {
      text-decoration: none;
      color: #E3CC82;
      font-weight: 500;
      font-size: 24px;
      padding: 0.7rem;
    }

    .navbar .menu-items ul a:hover {
      font-weight: bolder;
    }

    .kolonie-btn {
      display: inline-block;
      background-color: #E3CC82;
      padding: 8px 37px;
      border-radius: 7px;
      color: #1f1f1f;
      transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    }

    .kolonie-btn:hover {
      background-color: white;
      transform: scale(0.95);
      color: #1f1f1f;
    }

    .nav-container {
      display: block;
      position: relative;
      height: 60px;
    }

    .nav-container .checkbox {
      position: absolute;
      display: block;
      height: 32px;
      width: 32px;
      top: 20px;
      right: 20px;
      z-index: 5;
      opacity: 0;
      cursor: pointer;
    }

    .nav-container .hamburger-lines {
      display: block;
      height: 26px;
      width: 32px;
      position: absolute;
      top: 17px;
      right: 20px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .nav-container .hamburger-lines .line {
      display: block;
      height: 4px;
      width: 100%;
      border-radius: 10px;
      background: #E3CC82;
    }

    .nav-container .hamburger-lines .line1 {
      transform-origin: 100% 0%;
      transition: transform 0.4s ease-in-out;
    }

    .nav-container .hamburger-lines .line2 {
      transition: transform 0.2s ease-in-out;
    }

    .nav-container .hamburger-lines .line3 {
      transform-origin: 100% 100%;
      transition: transform 0.4s ease-in-out;
    }

    .navbar .menu-items {
      padding-top: 120px;
      background-color: rgba(31, 31, 31, 0.9);
      height: 100vh;
      width: 100%;
      position: fixed;
      top: 0;
      right: 0;
      transform: translate(150%);
      display: flex;
      flex-direction: column;
      margin-right: -40px;
      padding-right: 50px;
      transition: transform 0.5s ease-in-out;
      text-align: center;
      overflow-y: hidden;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(-45deg);
  background: #E3CC82;
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(45deg);
  background: #E3CC82;
}
  </style>
</head>
<body>
  <nav>
    <div class="navbar">
      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="menu-toggle" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
        <div class="menu-items">
          <ul>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">O nas</a></li>
            <li><a href="#">Projekty</a></li>
            <li><a href="#">Wsparcie</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a class="kolonie-btn" href="#">Kolonie</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <script>
    const menuToggle = document.getElementById('menu-toggle');
    menuToggle.addEventListener('change', function (event) {
      if (event.target.checked) {
        document.body.style.overflowY = 'hidden';
        document.body.style.height = '100vh';
      } else {
        document.body.style.overflowY = 'auto';
        document.body.style.height = 'auto';
      }
    });
  </script>
</body>
</html>

Thank you for any help

I tried changing the color of the parent, but that just changes colors of everything. I tried changing the colors in the code that doesnt work as well

Tags:

2

Answers


  1. 0 
    .kolonie-btn {
        color: #1f1f1f !important;
    }
    Login or Signup to reply.
  2. 0

    This happens because the rule is overwritten by .navbar .menu-items ul a {}.

    You need to be more specific when targeting the button. Just use the same descendant combinator:

    .navbar .menu-items ul .kolonie-btn {
     /* style the element */
}
.navbar .menu-items ul .kolonie-btn:hover {
     /* style the element */
}

    You can also do this by using the !important flag, but I personally would recommend avoiding the use of !important as much as you can.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search