Develop Reference

Hamburger menu doesn't collapse on click any link in mobile

I am building a website and ran across this issue.
I have a basic navbar which when viewed on mobile appears like a hamburger menu. The menu works fine. I have used pure HTML-CSS code for making this navbar. The issue is that the navbar is not closing when I click any link on the menu to navigate to a different section of the page.
HTML:
<header class="navbar-fixed-top">
<div class="container">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>HOME</li>
<li>MINT</li>
<li>COMMUNITY</li>
<li>PROJECTS</li>
<li>FAQ</li>
</ul>
</div>
</nav>
</div>
</header>
CSS
header {
text-align: right;
-webkit-transition: all .5s;
transition: all .5s;
height: 65px;}
nav {
padding: 8px;
}
nav ul {
margin-bottom: 0;
float:right;
-webkit-transition: all .5s;
transition: all .5s;
}
nav ul li {
display: inline-block;
float: left;
}
nav li {
display: inline-block;
margin: 0.75em;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: rgb(255, 255, 255);
text-transform: uppercase;
text-decoration: none;
font-size: 1.2em;
align-content: space-between;
font-weight: 600;
}
#media screen and (max-width: 864px) {
.logo {
padding:0;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgb(0, 0, 0);
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: left;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: rgb(255, 255, 255);
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn li {
background: #000;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked + .nav-btn i:nth-child(4) {
opacity: 0;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
.bg-nav {
background: #000;
}
.bg-nav ul {
padding: 10px;
}
`
Sorry for the long codes
Since I am a beginner with near to no experience in JS I would like to know if there is any solution for this.
Is there any solution in CSS for this or do we need to use JS.
Any help would be appreciated

I don't think you can do it with CSS only as it would require child -> parent relation.
If you are ok to use JS you can just set "false" to the #nav checkbox
const onLinkClick = () => {
document.querySelector("#nav").checked = false; // Once link is clicked -> make #nav checkbox false thus close the menu
};
document
.querySelectorAll(".nav-wrapper a") // Grab all links
.forEach((element) => element.addEventListener("click", onLinkClick)); // Listen for click on them

How do I add/toggle a class to element in order to switch Hamburger menu to X in order to close and back again

I'm trying to use vanilla JavaScript to switch the hamburger menu to an X and then back again. I want to only use vanilla js, not JQuery.
I have included the code to show I have tried. I am trying to get the '.open' class to be added/toggle when I "open" the menu. But to no avail.
Here is my code:
const navToggle = document.getElementById('nav-toggle');
navToggle.addEventListener('click', () => {
if (navToggle.classList)
navToggle.classList.add('open');
else
navToggle.className += ' ' + open;
// navToggle.style.display('open');
});
*,
html {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #333;
-webkit-font-smoothing: antialiased;
}
img.logo-header {
width: 10rem;
height: 10rem;
}
.header-wrapper {
border: 1px solid black;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.logo-header {
grid-column: 1;
}
/* Navbar */
.nav-header {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* Navbar Hamburger Menu */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin: 0 0 1em 1em;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: white;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
/* Change Color */
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a {
opacity: 1;
-webkit-transition: opacity 250ms ease-in-out 250ms;
-o-transition: opacity 250ms ease-in-out 250ms;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 4em;
right: 0;
margin-right: 1em;
height: auto;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: .125em;
width: 2.15em;
border-radius: .125em;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: .5em;
}
.nav-toggle-label span::after {
top: .5em;
}
.open .nav-toggle {
transform: rotate(45deg);
}
.open .nav-toggle::before {
opacity: 0;
}
.open .nav-toggle::after {
transform: translateY(-3px) rotate(-90deg);
}
<div class="header-wrapper">
<img class="logo-header" src="./assets/img/logo.png" alt="">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav class="nav-header">
<ul>
<li class="nav-item">Ministries</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Book</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label"><span></span></label>
</div>
I want the hamburger menu to disappear and turn into an X, then switch back to hamburger if clicked again. Right now, all that is happening is the menu is appearing and disappearing when clicked but nothing else. Would like there to be a transition from a hamburger to X. Nothing super fancy.

const navToggle = document.getElementById('nav-toggle');
navToggle.addEventListener('click', () => {
//This is a better way to toggle classes
navToggle.classList.toggle('open')
});
*, html {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #333;
-webkit-font-smoothing: antialiased;
}
img.logo-header {
width: 10rem;
height: 10rem;
}
.header-wrapper {
border: 1px solid black;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.logo-header {
grid-column: 1;
}
/* Navbar */
.nav-header {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* Navbar Hamburger Menu */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin: 0 0 1em 1em;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: white;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
/* Change Color */
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
-webkit-transition: opacity 250ms ease-in-out 250ms;
-o-transition: opacity 250ms ease-in-out 250ms;
transition: opacity 250ms ease-in-out 250ms;
}
/* Make middle bar invisible */
.nav-toggle:checked ~ .nav-toggle-label > span {
background-color: transparent;
}
/* Rotate and translate the top and bottom bar */
.nav-toggle:checked ~ .nav-toggle-label > span::before {
transform: translateY(0.5em) rotate(45deg)
}
.nav-toggle:checked ~ .nav-toggle-label > span::after {
transform: translateY(-0.5em) rotate(-45deg)
}
.nav-toggle {
display: none;
}
/* Fixed height of the box so that it covers the whole switch/button */
.nav-toggle-label {
position: absolute;
top: 2.925em;
right: 0;
margin-right: 1em;
height: 2.15em;
display: flex;
align-items: center;
}
/* Added transition */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: .125em;
width: 2.15em;
border-radius: .125em;
position: relative;
transition: transform 0.2s, background-color 0.2s;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: .5em;
}
.nav-toggle-label span::after {
top: .5em;
}
.open .nav-toggle {
transform: rotate(45deg);
}
.open .nav-toggle::before {
opacity: 0;
}
.open .nav-toggle::after {
transform: translateY(-3px) rotate(-90deg);
}
<div class="header-wrapper">
<img class="logo-header" src="./assets/img/logo.png" alt="">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav class="nav-header">
<ul>
<li class="nav-item">Ministries</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Book</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label"><span></span></label>
</div>
Here you go:
https://codepen.io/anon/pen/YMoEwX
By using transform: rotate() translateY() I make the top and bottom bar into an X and I also make the middle bar invisible.
I also went ahead and fixed the height of the switch/button and your JavaScript.

Swipe sidebar menu doesn't work in chrome

i did the menu from that template
https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html
but it work only in firefox/edge/safari(ios). and doesn't work in chrome/opera and other browsers
as i see in debug (F12) menu in chrome, after swipe js add "open-sidebar" class but menu didn't appear on the screen
what i did wrong?
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { left: 240px; }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>
By the way, when i was forming my snippet for i've found my mistake.
.container{
position:sticky;
}
I don't know why that works in firefox/edge/safari and pre-installed browser on my few android phones.

Use transfrom:
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { transform: translate(240px, 0); }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>

Reverting hamburger animation after clicking the menu item

I'm currently setting up a one page website including a hamburg menu.
The menu is build up with list elements which are linked to a specific tag on that page.
I have only one issue and that's to revert the hamburg icon animation (which becomes a cross on click) back to it's normal state.
Here's the code :
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open').show();
});
$('#overlay li').on('click', function(){
$('#overlay').hide();
$('#toggle').removeClass("active");
});
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #1abc9c;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #1abc9c;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Varela Round', serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fd7014;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed;
background: #1a1a1a;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Varela Round', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: ;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: ;
position: relative;
color: #fd7014;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li class="overlay-li">portfolio</li>
<li>services</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div>
Does anyone know where how to fix this issue?

I dont have above 50 reputations so cant resolve your problem in comments,...
you just forgot to toggle the 'open' class of overlay when you are clicking on li
so just add the following line in your li click function
$('#overlay').toggleClass('open');
http://jsbin.com/faquzisobi/2/edit?html,css,js,output
everything else seems fine. :)

I'm trying to put a CSS&Javascript button to do the job of another label&input checkbox?

Essentially, I'm trying to combine two online tutorials:
1st is from the good folks here http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ which gives me a button that creates a drop down menu that displays hides with css display attribute, which I have working:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
I have this working, hiding and showing my
<ul id="menu">
but I want the below menu button to do the same job. The second is from a great tut for a menu icon that changes to a cross and back again with css and javascript:
http://callmenick.com/post/animating-css-only-hamburger-menu-icons
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
I tried putting on inside the other, but it seemed to lose the functionality… Any help much appreciated.
– – -
OK the full markup is:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
<!-- START Hamburger Icon -->
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
<!-- END Hamburger Icon -->
<!-- END Button for menu below when below CSS Mediaquery -->
<ul id="menu">
<li><a class="item1" href="/item1.html">item1</a></li>
<li><a class="item2" href="/item2.html">item2</a></li>
<li><a class="item3" href="/item3.html">item3</a></li>
</ul>
The second part also has the following Javascript:
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
</script>
and the following is the css used for the css checkbox:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: inline-block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
right: 0px;
line-height: 1.2em;
padding-right: 20px
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
text-align: right;
line-height: normal;
background-color: rgba(0, 0, 0, 0.0);
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
padding-right: 0px;
position: absolute;
display: block;
right: 0px;
top: 10px;
}
}
and the following is the css used for the css/javascript button animation:
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 32px;
left: 30px;
right: 30px;
height: 4px;
background: white;
border-radius: 1px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: "";
border-radius: 1px;
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
.c-hamburger--htx {
background-color: transparent;
}
.c-hamburger--htx span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.c-hamburger--htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color:;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}