JavaScript issues on semantic tags – JavaScript – SitePoint Forums

Salvation,

I’m pretty much new to Javascript, I already built my navs on jQuery before taking a few years break from web design.

However, I’ve been playing with flexbox and its capabilities, can someone explain where I’m wrong? .. The hamburger toggle should click to display the ul list.

jsfiddle – https://jsfiddle.net/7q98mepv/1/

/* NAV BAR */

nav {
  width: 100%;
  height: 100px;
  background: #ffffff;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
  

}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #e74c3c;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;


}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
  
}

nav li {
  padding-left: 30px;
}

nav a {
  color: #000000;
}


@media (max-width: 1008px) {

nav {
  position: relative;
  
}
/*
.logo {
  
}*/

.nav-menu {
  display: flex;
  font-size: 30px;
}

nav ul {
  flex-direction: column;
  right: 0;
  top: 100%;
  background: #ecf0f1;

  

  display: none;
  
  height: auto;
  position: absolute;
  width: 100%;
}

nav li {
padding: 10px 0px 10px;

}

nav a {
  color: #000;
}

.contact-item {
  font-size: 14px;
 padding: 10px;
 }
}

const toggleButton = document.getElementsByClassName('nav-menu')[0];
const menu = document.getElementsByClassName('ul')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
  menu.classList.toggle('nav-menu')
})

It was just a small thing.

ul is a tag not a classname

const menu = document.getElementsByClassName('ul')[0];

Use this instead.

const menu = document.getElementsByTagName('ul')[0];
// or better
const menu = document.querySelector('ul');

You can also use a querySelector here. document.querySelector selects the first element found, so no need to specify an index.

const toggleButton = document.getElementsByClassName('nav-menu')[0];
// change to
const toggleButton = document.querySelector('.nav-menu');

You're a star, work a spell.

Ignore below, managed to fix with nav-menu class
thanks again
The only problem being that it seems to have bugged my css, I checked on devtools to see if I did something stupid, but the height of the class ul (height: auto) no longer takes the full height of the linked elements?