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>
2 answers
solution1
1 2020-06-14 21:48:14
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
changeon a different element which is an ancestor of the menu or - Change your selector to match the actual relationship between the elements (thenext-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).
solution2
1 ACCPTED 2020-06-14 21:50:51
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Some of CSS modules styles are not being applied
How to make CSS styles override JavaScript applied styles
Webpack - scss/css modules styles not being applied in prod
Why arent my CSS styles being applied to on laptop media query?
CKEditor - my styles in editor.css aren't being applied
jQuery mobile css styles not being applied in underscore template
CSS class selector styles not being applied in React Project
CSS styles not being applied to HTML within a Vue Component
JavaScript - Is there a way to get the offsetTop of an element after hypothetical CSS styles are applied?
when the CSS styles are applied to the DOM?
Related Tags