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

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


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


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


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

hamburger.addEventListener('click', () => {

You could just add the open class by default.

<div class="sidebar open">

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.