Issues with JavaScript on semantic tags – JavaScript – SitePoint

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')
})

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');

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?

Leave a Reply

Your email address will not be published.