Telegram API Question posted in
A comprehensive official documentation can be found here.

Javascript and css styles not being applied – Telegram API

Im getting started on JavaScript and i can’t find the mistake. Ok, originally .menu has right: -100 and has the JavaScript .change is supposed to set it to right: 0. But nothing happens when i click the burger button. Lines are the only that change, but menu doesn’t. If anyone could help i would be kinda grateful.

const menuIcon = document.querySelector (".hamburguer-menu");
const navbar = document.querySelector(".navbar");

menuIcon.addEventListener("click", () => {
  navbar.classList.toggle("change");
});
*{
  margin:0px;
  padding: 0px;
  font-family: 'Lato', sans-serif;
}

button{
  width:30px;
  height: 30px;
  cursor:pointer;
  background: none;
  border:none;
  font-size: 50px;
  color: #fff;
}

.hamburguer-menu{
  width:22px;
  position: fixed;
  /* right:0; */
  top:6%;
  padding: 0px 15px 1px 9px;
  z-index: 100;
}
  .hamburguer-menu .line1, .line2, .line3{
    width: 100%;
    height: 3px;
    border-radius: 1px;
    background-color:#fff;
    transition: all .3s;
  }
  .hamburguer-menu .line2, .line3{
    margin-top:4px;
  }
  .change .menu{
      position: fixed;
      right: 0;
    }

  .change .line1{
    transform: rotate(-45deg) translate(-5px, 5px);
  }
  .change .line2{
    opacity:0;
  }
  .change .line3{
    transform: rotate(45deg) translate(-5px, -5px);
  }
header{
  width: 100%;
  height: 100px;
  background: #34495e;
}

header nav{
  display: inline;
}

header div p{
  line-height: 100px;
  float:left;
  color: #fff;
}

.menu{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #333;
  top:0;
  right: -100%;
  padding: 80px 0px;
}

.menu button{
  display: block;
  padding: 45px 0px;
  margin: 0px auto 0px auto;
}

.menu button:focus{
outline:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script>
  <title>Digna Sulbaran</title>
</head>
<body>

<header>
  <div>
    <p>Pamela Sulbaran</p>
  </div>

  <nav class="navbar">
    <div class="hamburguer-menu">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>

  <nav>
    <ul class="menu">
      <button><i class="fab fa-instagram"></i></button>
      <button><i class="fab fa-facebook-f"></i></button>
      <button><i class="fab fa-whatsapp"></i></button>
      <button><i class="fab fa-telegram-plane"></i></button>
    </ul>
  </nav>

</header>

<section class="first">
    <img src="images/grey.png" alt="">
    <h2>about me</h2>
    <h1>Pamela Sulbaran</h1>
    <div>
      <p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div>
      <p>contact me</p>
    </div>

</section>
<script src="js/index.js"></script>
</body>
</html>
Tags:

2

Answers


  1. 0

    A space is a descendant combinator.

    .change .menu matches any element that is a member of the class menu and is a descendant of an element that is a member of change.

    screenshot of DOM

    The only element that is a member of menu is not a descendant of the element to which you add change.

    You need to either:

    • Set change on a different element which is an ancestor of the menu or
    • Change your selector to match the actual relationship between the elements (the next-sibling combinator will probably be useful for that) or
    • Restructure your HTML so you only have one <nav> element (this is likely the best approach).
    Login or Signup to reply.
  2. 0

    You don’t need 2 <nav> elements. I have connected them into one, according to your CSS and JavaScript, and now it works. Unlike JavaScript, don’t forget to use px with the digits that are definitely pixels, like right: 10px; (you can ignore px only for 0).

    const menuIcon = document.querySelector (".hamburguer-menu");
const navbar = document.querySelector(".navbar");

menuIcon.addEventListener("click", () => {
  navbar.classList.toggle("change");
});
    *{
  margin:0px;
  padding: 0px;
  font-family: 'Lato', sans-serif;
}

button{
  width:30px;
  height: 30px;
  cursor:pointer;
  background: none;
  border:none;
  font-size: 50px;
  color: #fff;
}

.hamburguer-menu{
  width:22px;
  position: fixed;
  right: 0px;
  top:6%;
  padding: 0px 15px 1px 9px;
  z-index: 100;
}
  .hamburguer-menu .line1, .line2, .line3{
    width: 100%;
    height: 3px;
    border-radius: 1px;
    background-color:#fff;
    transition: all .3s;
  }
  .hamburguer-menu .line2, .line3{
    margin-top:4px;
  }
  .change .menu{
      position: fixed;
      right: 0px;
    }

  .change .line1{
    transform: rotate(-45deg) translate(-5px, 5px);
  }
  .change .line2{
    opacity:0;
  }
  .change .line3{
    transform: rotate(45deg) translate(-5px, -5px);
  }
header{
  width: 100%;
  height: 100px;
  background: #34495e;
}

header nav{
  display: inline;
}

header div p{
  line-height: 100px;
  float:left;
  color: #fff;
}

.menu{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #333;
  top: 0px;
  right: -100%;
  padding: 80px 0px;
}

.menu button{
  display: block;
  padding: 45px 0px;
  margin: 0px auto 0px auto;
}

.menu button:focus{
outline:none;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script>
  <title>Digna Sulbaran</title>
</head>
<body>

<header>
  <div>
    <p>Pamela Sulbaran</p>
  </div>

  <nav class="navbar">
    <div class="hamburguer-menu">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>

    <ul class="menu">
      <button><i class="fab fa-instagram"></i></button>
      <button><i class="fab fa-facebook-f"></i></button>
      <button><i class="fab fa-whatsapp"></i></button>
      <button><i class="fab fa-telegram-plane"></i></button>
    </ul>
  </nav>

</header>

<section class="first">
    <img src="images/grey.png" alt="">
    <h2>about me</h2>
    <h1>Pamela Sulbaran</h1>
    <div>
      <p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div>
      <p>contact me</p>
    </div>

</section>
<script src="js/index.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search