Hamburger menu drop down on low width

Question

I have navbar with few items and hamburger icon that should be displayed on low width, in this time navbar items should hide. With the button i want to change their display to bo flex and flex-direction set to column, so items will display vertically. I am trying to use this function, could you suggest me something ?

Here is the code :

 let btn = document.getElementById('btn'); let menu = document.getElementsByClassName('hammburger-links')[0]; btn.addEventListener('click', function() { menu.classList.toggle('openmenu'); }); 

 .slider .hammburger-menu { width: 16px; height: 14px; border: 0; display: none; position: absolute; } @media (max-width: 1425px) { .slider .hammburger-menu { display: inline; } .slider .hammburger-menu div { background-color: #202124; display: block; width: 16px; height: 2px; margin: 4px 0; } } .slider .hammburger-links { padding: 0 1.250em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .slider .hammburger-links a { padding: 0 1.500em; text-decoration: none; font-family: "Helvetica", Arial; font-size: 11px; color: #a6adb4; } @media (max-width: 1425px) { .slider .hammburger-links a { display: none; } } .slider .hammburger-links .under-home { position: absolute; top: 2.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #F6F8F9; min-width: 12.5em; min-height: 12.5em; z-index: 1; display: none; } .slider .hammburger-links .under-home a { margin: 10px 0; } .slider .hammburger-links.openhome { display: -webkit-box; display: -ms-flexbox; display: flex; } .slider .hammburger-links.openmenu a { display: flex; flex-direction: column; } 

 <div class="slider"> <div class="hammburger-menu" id="btn"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="hammburger-links" id="menu"> <a href="" id="home">HOME</a> <div class="under-home"> <a href="">WORLD NEWS</a> <a href="">TRAVEL</a> <a href="">TECHNOLOGY</a> <a href="">CITY</a> <a href="">CULTURE</a> <a href="">MORE...</a> </div> <a href="">DISCOVERY</a> <a href="">PHOTOS</a> <a href="">CONTACT</a> <img src="images/navbar-img.png" alt=""> </div> </div> 

Answer 1

document.getElementsByClassName returns an array. So you want to do let menu = document.getElementsByClassName('hammburger-links')[0]; or get the element by id (menu).

Doing that should add the desired class to the #menu element, but your CSS also has a problem. Your CSS selector .slider .hammburger-links .openmenu doesn't select anything. That selector looks for an element .openmenu that is a descendant of an element .hammburger-links, that is a descendant of element .slider. You need the element that belongs to classes hammburger-links and openmenu. The selector looks like this: .slider .hammburger-links.openmenu

However, that still doesn't reveal the menu elements. I found that changing the selector again to target child anchor elements ( .slider .hammburger-links.openmenu a ) did the trick, but you may want to go about that differently depending on how you want to implement it.