Issues with JavaScript on semantic tags

JavaScript
1

Howdy,

I am pretty much new to Javascript, previously built my navs on jQuery before taking a couple of years break from web design.

However I have been playing with flexbox and it’s capabilities, can somebody explain where I am going wrong?.. The hamburger toggle should be clicking to display the ul list.

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

<!DOCTYPE html>
<html lang="en">

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <nav class="navigation-bar">
      <div class="container">
        <div class="logo">
          <span class="black">JS</span>
          <span class="red">Test</span>
        </div>


        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

        <div class="nav-menu">
          <i class="fa-solid fa-bars"></i>
        </div>
      </div>
    </nav>

/* 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')
})
2

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 could also use a querySelector here. document.querySelector selects the first found element, so no need to specifiy an index.

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

You’re a star, works a charm.

Disregard below, managed to fix with the nav-menu class :slight_smile:
Thanks again
Only issue being is that it seems to have bugged my css up, I have checked on devtools to see if I did something dumb, but the height of the ul class (height: auto) is no longer taking the full height of the li items?

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.