Hamburger menu not working using CSS only

Question

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>

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

I assume you want an animation effect as the hamburger comes into view. You can't use display as that is not animatable but you could use opacity so the hamburger appears more gradually. Is that suitable? — A Haworth, Dec 03 '21 at 07:11

score 1 · Answer 1 · answered Dec 03 '21 at 07:03

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>

Fabian S. · Accepted Answer · 2021-12-03T10:52:49.210

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>

So, how do I select the class `hamburger-menu` when the checkbox is checked? — , Dec 03 '21 at 07:01
You _could_ use the css `~` selector but that would require reforming your html (@ANDO Andriamalala just added a solution using that). I'd recommend using javascript in combination with a visiblity class for your menu. By doing so you dont need to change your html at all. I added a snippet. — Fabian S., Dec 03 '21 at 07:04

Hamburger menu not working using CSS only

2 Answers2