Customise the code so the menu is open by default on the webpage:

[emailgarvin]

How do we customise the code so the menu is open by default on the webpage:

HTML:

<div class="sidebar">
  <button class="hamburger">&#9776;</button>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS:

body{
  background-color: #F3F7F4;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #AFC2D5;
  color: #fff;
  transition: left 0.3s ease-in-out;
  font-family: 'Open Sans', sans-serif;
}

.sidebar.open {
  left: 0;
}

.hamburger {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  color: #fff;
  background-color: #070A0D;
  font-size: 16px;
  padding: 10px;
}

.menu {
  list-style: none;
  padding: 0;
  margin-top: 70px;
}

.menu li {
  padding: 10px;
}

.menu li a {
  text-decoration: none;
  color: #000;
}

JAVASCRIPT:

const hamburger = document.querySelector('.hamburger');
const sidebar = document.querySelector('.sidebar');

hamburger.addEventListener('click', () => {
  sidebar.classList.toggle('open');
});

[PaulOB]

@emailgarvin

How do we customise the code so the menu is open by default on the webpage:

You could just add the open class by default.

<div class="sidebar open">