Javascript and css styles not being applied

Question

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>

The CSS selector .change .menu to which you apply right: 0 would mean that .menu is inside .change (navbar), in your HTML. That is not the case in your HTML, so these CSS rules are not applied — blex
– blex, Commented Jun 14, 2020 at 21:47

focus.style · Accepted Answer · 2020-06-15 08:36:13Z

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>

Quentin · Accepted Answer · 2020-06-14 21:48:14Z

1

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.

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

answered Jun 14, 2020 at 21:48

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Javascript and css styles not being applied

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related