I'm trying to clone a website for learning purposes with W3CSS and plain javascript. Here is the stuff I already created. My problem is, that the div with id #menu is not visible on the screen after clicking the hamburger icon on small screens, however, it is present in the devtools of chrome and ff when it is toggled. I have checked lot's of things in the css like display:, z-index:, background-color:, overflow:, whatsoever, even tried to print stuff with js to console regarding computed style and whatnot, but nothing led me to any solution. When I checked the above pen on my mobile phone with chrome, the toggle button (the one with the hamburger icon) was not positioned in the middle of the menu bar and when clicked it, to open the dropdown, the first menu item became visible (actually the top part of the <a> element which happend to fit in the top navigation bar). I'll post the complete html && css && js code here too, bc of this annoying red exclamation mark.
html
function toggleMenu() {
let toggler = document.getElementById('menu-toggler');
let menu = document.getElementById(toggler.dataset.menu);
if (hasClass(menu, 'w3-hide-small')) {
rmClass(menu, 'w3-hide-small');
console.log(window.getComputedStyle(menu).backgroundColor);
let children = menu.childNodes;
let height = 0;
for (let child of children) {
if (child instanceof Element) {
height += child.offsetHeight;
}
}
menu.style.height = height + 'px';
} else {
menu.style.height = '';
// 500 is the length of the transition
window.setTimeout(() => {
addClass(menu, 'w3-hide-small');
}, 500);
}
}
function hasClass(elem, cl) {
if (elem.className.includes(cl)) {
return true;
}
return false;
}
function addClass(elem, cl) {
if (!hasClass(elem, cl)) {
elem.className += ' ' + cl;
}
}
function rmClass(elem, cl) {
if (hasClass(elem, cl)) {
elem.className = elem.className.replace(' ' + cl, '');
}
}.w3-hover-flat-emerald:hover {
color: #fff;
background-color: #2ecc71 !important;
}
nav {
height: 80px;
}
nav .w3-hide-small a {
height: 80px;
line-height: 64px;
}
nav .w3-hide-small a:hover {
color: #2ecc71 !important;
background-color: transparent !important;
}
nav img {
height: 80px;
}
nav .w3-content {
position: relative;
}
nav button {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
}
#menu {
transition: height 0.5s linear 0.1s;
overflow: hidden;
}
@media screen and (max-width: 600px) {
#menu {
height: 0;
}
nav .w3-hide-small a {
height: auto;
}
}<!doctype html>
<html>
<head>
<title>copy_lesson</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css">
<link rel="stylesheet" href="../w3.css/w3-colors-flat.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="style/css/main.css">
</head>
<body>
<nav class="w3-bar w3-camo-black w3-xlarge">
<div class="w3-content">
<a href="#">
<img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo">
</a>
<button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right">
<i class="fas fa-bars"></i>
</button>
<div id="menu" class="w3-mobile w3-right w3-hide-small w3-large">
<a href="#" class="w3-button w3-bar-item w3-mobile">Home</a>
<a href="#" class="w3-button w3-bar-item w3-mobile">About</a>
<a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a>
</div>
</div>
</nav>
<script src="style/js/main.js"></script>
</body>
</html>Any would be appreciated. Thanks in advance :)
