We Keep Coding

CSS & Javascript issues with a hamburger menu and an image gallery

I was following 2 youtube tutorials while working on a website. One tutorial was on building a complete website that's responsive and the second was on creating an image gallery with a grid layout. The end result that I had when I finished working on my website looked good but I noticed two problems.
When you decrease the size of the website so that it takes up half of your screen, the navbar shrinks down and you get a hamburger menu. But clicking on the hamburger isn't opening it up like it should. There's an eventListener that should be adding and removing a class called active but nothing is happening.
This is the html code that contains the navbar and hamburger icon
<header>
Glitta Art Studio
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
This is the CSS for the media query
#media(max-width: 1140px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: #2b2640;
transition: .3s;
}
header .navbar .active {
top: 70px;
}
.navbar a {
padding: 1.5rem;
display: block;
}
.col {
width: 50%;
margin-bottom: 10px;
}
}
And here's the JavaScript
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
menu.addEventListener("click", function () {
navbar.classList.toggle("active")
});
window.onscroll = () => {
navbar.classList.remove("active");
};
The second problem is technically not as big of a deal as the nav, but it's been more annoying for me to deal with so far. When you move your mouse over one of the images in the gallery section, a white box appears over the image with a title of the image and some information about it. But for some reason, the person in the tutorial added an a tag to the text in these boxes and I blindly added that to my project without thinking. Clicking on the box brings you back up to the homepage so I want to get rid of that completely and not have it link to anything. I'm not sure what the issue is with the CSS, but if you try to remove the a tags in the html and replace them with a regular p tag then it completely ruins the the grid of images and they all get stuck on one side of the screen.
Here's the HTML code of the gallery (There's 10 divs exactly like this with the same filler text and temporary image)
<div class="image-gallery">
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
Painting Title
</h3>
<span class="category">
text about piece here
</span>
</div>
</div>
</div>
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
Painting Title
</h3>
<span class="category">
text about piece here
</span>
</div>
</div>
</div>
And here's the CSS
.gallery {
margin: 0;
padding: 0;
position: relative;
}
.image-gallery {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 50px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.image-gallery .image-box {
position: relative;
background-color: #d7d7d8;
overflow: hidden;
}
.image-gallery .image-box:nth-child(7n + 1){
grid-column: span 2;
grid-row: span 2;
}
.image-gallery .image-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.image-gallery .image-box:hover img {
transform: scale(1.1);
}
.image-gallery .image-box .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafaf2;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.5s ease;
z-index: 1;
}
.image-gallery .image-box:hover .overlay {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
opacity: 1;
}
.image-gallery .image-box .details {
text-align: center;
}
.image-gallery .image-box .details .title {
margin-bottom: 8px;
font-size: 24px;
font-weight: 600;
position: relative;
top: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box .details .category {
font-size: 18px;
font-weight: 400;
position: relative;
bottom: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box:hover .details .title {
top: 0px;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box:hover .details .category {
bottom: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
color: #222222;
text-decoration: none;
}
Sorry for asking these basic questions. I haven't practiced coding anything in a long while so I've forgotten a lot of things.
Edit: I was able to fix the gallery issue. Now its just the hamburger issue that I have to deal with

You can try implying the function in the HTML element itself like this:
<div class="bx bx-menu" id="menu-icon" onclick="ToggleClassActive()"></div>
and you need to delete the eventlistener function and use this instead
function ToggleClassActive(){
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
navbar.classList.toggle("active");
}
You also need to ensure that the script is after the elements(The best place to place your script is right before the
And could you please show the error which occurs in the console

JavaScript auto type writer function

I'm having an issue with a automatic typing function that I have created for this website. Everything works great but when it finish going thru my array of words it move the page up then when it starts again it moves the page down. I want the page to stay in place when it finish the array of words as well as when it starts the array of words.
var messages=["Your word is a lamp to my feet and a light to my path.","","Be still, and know that I am God! I will be exalted among the nations, I will be exalted in the earth!","Beauty for ashes"];
var rank=0;
// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);
// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);
function changeTxt(e){
_h1 = this.getElementsByTagName("h1")[0];
_h1.style.webkitAnimation = 'none'; // set element animation to none
setTimeout(function() { // you surely want a delay before the next message appears
_h1.innerHTML=messages[rank];
var speed =2.8*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
_h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation
(rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
}, 1000);
}
body{
margin: 0;
padding: 0;
background-color: purple;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/*-------------Header/Nav----------*/
header{
width: 100%;
}
#start{
width: 90%;
margin: 0 auto;
text-align: center;
}
#start h1{
color: white;
letter-spacing:6px;
font-size: 3em;
font-family: 'Anton', sans-serif;
}
nav ul{
list-style-type: none;
padding: 0;
margin-left: 32%;
}
nav a{
float: left;
font-size: 1.2em;
margin-right: 38px;
}
#wrapper{
width: 100%;
margin: 0 auto;
background-color: Fuchsia;
color:white;
}
#nav{
width: 80%;
margin: 0 auto;
}
a:nth-child{
margin-right: 0;
}
/**************Type writer***********/
.myTypewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
#wrapper-two{
background: purple;
color: #fff;
font-family: monospace;
padding-top: 3em;
display: flex;
justify-content: center;
}
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: blue; }
}
/*--------------section two---------------*/
#wrapper-home{
width: 90%;
margin:0 auto;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
}
h2{
float: left;
}
img{
float: left;
}
/*----------------Media Queries-----------*/
#media only screen and (max-width: 1200px){
nav ul{
margin-left: 20%
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="otkcdim.css">
<title>Home</title>
</head>
<body>
<header>
<div id="start">
<h1>Only </h1>
</div>
</header>
<nav >
<div id="wrapper" class="cf">
<div id="nav" class="cf">
<ul class="cf">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Events</a></li>
<li><a>Encouragement</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<!--*****************Type Writer*************************-->
<section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper-two">
<div class="myTypewriter" id="myTypewriter">
<h1> Beauty for Ashes</h1>
</div>
</div>
</section>
<!--**********Home Page***************-->
<div id="wrapper-home">
<div class="yes">
<img src="ma.jpg">
<h2>Welcome.</h2>
</div>
</div>
<script type="text/javascript" src="otkcdim.js"></script>
</body>
</html>

I made a small change to your CSS to fix this problem. Hope it's helpful.
.myTypewriter h1 {
overflow: hidden;
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
// Set minimum height of auto-typewriter to hold it's place even when empty.
min-height: 25px;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

Replace one large word with an entire menu (css/js?)

For this personal sight I'm building I want it to be fairly simple. I have a big title in the middle of the screen, just one word, and when you hover over it I want it to be replaced with a menu -- basically a white box the size of the title with links on it.
The problem with other solutions I've seen is mostly people want to replace one word with just one word, I could do that. But I want to change the contents drastically, and I can't quite figure it out. I'm having trouble getting it to be positioned correctly, as well as there is a LOT of flickering happening.
Confused about how I'd add a whole list of links into the css "content" or js "data" fields.
Here is a jsfiddle of what i'm working with so far as well as my code.
<div class = "container">
<div class = "main">
<span class = "maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class = "menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
and my CSS:
body{
background-color: #ED0349;
font-family:Arial;
color:#DBFA05;
}
h1{
text-align: center;
font-size:200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
#titre{
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.container{
}
.main{
display: inline-block;
padding-left: 50%;
}
.container .menu { display: none; }
.container:hover .maintit {display:none;}
.container:hover .menu {display: inline-block;}

Put the "word" and the menu inside a parent, centered (displayed one on top of the other.
When the parent is not hovered, display the word and hide the menu.
When the parent is hovered, display the menu and hide the word.
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
.main > * {
display: block;
width: 100%;
height: auto;
overflow: visible;
text-align: center;
transition: opacity .3s cubic-bezier(.5,0,.3,1);
position: relative;
}
.main:hover .maintit,.main .menu {
opacity: 0;
}
.main:hover .menu {
opacity: 1;
}
body {background-color: gray;}
.main > .menu {
position: absolute;
max-width: 100%;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>

The main trouble while hovering is the sizing of .container, which is monitored, changes.
Solution: Give .container a height and width and the flickering stops.
body {
background-color: #ED0349;
font-family: Arial;
color: #DBFA05;
}
h1 {
text-align: center;
font-size: 200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
.container {
width: 100%;
height: 100vh;
}
#titre {
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.main {
display: inline-block;
padding-left: 50%;
}
.container .menu {
display: none;
}
.container:hover .maintit {
display: none;
}
.container:hover .menu {
display: inline-block;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>

Animate div positioning rearrangement

I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container while changing its position to a relative for the opened state.
I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to a relative in this case)
Currently, when I switch the positioning from fixed to a relative as expected - there is a gap being produced, which is the .sub-header's height.
NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.
NOTE: This should be achieved by adding a custom class, not using jQuery's nested effects like .slideToggle etc.
Here is the Fiddle.
And the simple jQuery function needed for the Fiddle share:
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();

Make position: relative; and do margin top for animating
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-150px;
left: 0;
right: 0;
z-index: 10;
position: relative;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>
Update:-
As to get -100% you have make it float and set all width to 100%
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
width:100%;
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
width:100%;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-100%;
left: 0;
right: 0;
z-index: 10;
float:left;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
width:100%;
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>

Correct me if I misunderstood your question, but I guess there's much simpler approach to what you're trying to achieve. Try changing corresponding classes in your CSS code:
.sub-header {
background: gainsboro;
height: 0;
-webkit-transition: height .3s linear;
transition: height .3s linear;
}
.opened {
height: 150px;
}
Here's the fiddle. My approach does not cover all bases, as you can see there is still text visible in the hidden container, which is going to need some additional workaround in your js or css, but I guess it is simpler than yours, considering that your .sub-container has fixed height.
EDIT
For non fixed height, there is workaround in my approach:
.sub-header {
background: gainsboro;
height: auto;
max-height: 0px;
-webkit-transition: max-height .3s linear;
transition: max-height .3s linear;
}
.opened {
max-height: 400px;
}
but it still needs to be adjusted - when you set .opened's max-height to the lower value, transition is going to be slower. It is not perfect, thought it covers cases, where .sub-containers' heights are relatively similar.

please check this out. we can use margin for styling and keep position the same relative
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;
transform: translateY(-200%);
left: 0;
right: 0;
z-index: 10;
/*play with position and margin*/
position: relative;
margin-bottom:-200px;
}
.opened {
transform: translateY(0%);
margin-bottom:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">
<p>Sub Header content</p>
</div>
<main>Main Content</main>

Responsive navigation stays hidden on window resize (pure JS)

I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil