I have the following code. The hamburger menu is always being displayed, irrespective whether the checkbox is checked or not.

input[type=checkbox]:checked .hamburger-menu {
  animation: menu-display 0.3s forwards ease-in-out;
}

@keyframes menu-display {
  from {
    display: none;
  }
  to {
    display: block;
  }
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I want the .hamburger-menu to display when the checkbox is checked.

CodePudding user response：

Try this

input[type=checkbox] ~ .hamburger-menu {
  display: none;
}

input[type=checkbox]:checked ~ .hamburger-menu {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
      <div class='hamburger-menu'>
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'BlogListView' %}">Blog</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </div>
    </div>
  </nav>
  <!-- end of navbar -->
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The problem is in your css selector input[type=checkbox]:checked .hamburger-menu.

That selector selects a element with the class .hamburger-menu inside a input[type=checkbox] element with the state :checked.

Your markup does not contain a such construct (which would be invalid anyways cause you literally can not put content inside a <input/> tag).

Anyways, even if it would select correctly, youre trying to animate the display css propery which is not possible.

Dropping that animation attempt, you could use JavaScript to show/hide the menu.

let checkbox = document.querySelector('#checkbox');
let menu = document.querySelector('.hamburger-menu');

checkbox.addEventListener('change', (event) => {
  if (event.target.checked === true)
    menu.classList.add('visible');
  else
    menu.classList.remove('visible');
});

.hamburger-menu {
  display: none;
}

.hamburger-menu.visible {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>