We Keep Coding

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

what's wrong on code javascript with list item menu?

I use This code on my dropdown list Item on click.. it's working Good . but Problem is .. when I click in link not working..
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
An example from here ==> https://codepen.io/0fercpkzi/full/jOMqXgV

Remove e.preventDefault inside showSubMenu, or, perform a check to see if it's an a tag being clicked:
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el) {
el.addEventListener('click', onClick, false);
});
function onClick(e) {
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el) {
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e) {
// Return if target is an anchor tag
if (e.target.localName === 'a') return;
e.preventDefault();
if (el.contains(e.target)) {
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el) {
el.classList.remove('show-submenu');
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f00;
}
.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item dropdown">
<span>Drop Down</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Google</li>
<li class="submenu-item">Yuotube</li>
<li class="submenu-item">Facebook</li>
</ul>
</nav>
</li>
</ul>
</nav>

JS problem with eventListener on IE11 - slide navigation not working

i'm very new on the javascript field and i have a big problem.
I worked on it the last 7 days and i can't find a solution.
I hope that anyone could tell me the code to solve this problem.
The following snippet show's my navigation. It work's fine on chrome, firefox but not on the IE11 - and it must worked on it.
It don't opened on IE11.
I tried the attachEvent function, but i didn't find the right code.
I'm very thankful for every help.
It would be a pleasure if anybody could tell me the little code part.
Thank you!!
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', () => {
navBar.classList.toggle('toggle');
});
.nav-bar {
position: fixed;
z-index: 1;
background-color: red;
top: 0;
left: -100%;
height: 100%;
width: auto;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-out;
padding: 2%;
}
.toggle {
left: 0;
box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}
.toggle-menu {
background-color: white;
position: fixed;
top: 1rem;
left: 1rem;
width: 3.5rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
overflow: hidden;
background-clip: padding-box;
border: 3px solid black;
cursor: pointer;
}
.line {
width: 100%;
height: 4px;
border-radius:5px;
background-color: #000;
transition: 0.2s ease-out;
}
.toggle .line1 {
background-color: #e30513;
transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
display: none;
}
.toggle .line3 {
background-color: #e30513;
transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}
.toggle .toggle-menu {
background-color: white;
border: 0;
}
.nav-list {
list-style: none;
padding: 0;
line-height: 0.5;
}
.nav-list-item {
text-align: left;
padding: 1rem 0;
}
.nav-list-item a:hover{
color: white;
}
.nav-link {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
position: relative;
padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
color: white;
}
.nav-link::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
transform: scaleX(0);
transition: 0.4s ease-in-out;
transform-origin: left;
}
.nav-link:hover::before {
transform: scaleX(1);
}
<div class="navigation">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<li class="nav-list-item">Link 1</li>
<li class="nav-list-item">Link 2</li>
</ul>
</nav>
</div>

Try to replace your arrow function with a regular function as IE11 doesn't support arrow functions.
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});

I agree with the suggestion provided by Acidic9 regarding the arrow functions.
Arrow functions not supported in the IE browser and your JS code uses the arrow functions.
While running the code in the IE browser it will show the syntax error.
To fix the issue you need to remove the arrow function from your JS code.
Below is your problematic code:
toggleButton.addEventListener('click', () => {
navBar.classList.toggle('toggle');
});
It needs to replace with the code below will fix the issue.
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});
Here is the full modified code:
var toggleButton = document.querySelector('.toggle-menu');
var navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});
.nav-bar {
position: fixed;
z-index: 1;
background-color: red;
top: 0;
left: -100%;
height: 100%;
width: auto;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-out;
padding: 2%;
}
.toggle {
left: 0;
box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}
.toggle-menu {
background-color: white;
position: fixed;
top: 1rem;
left: 1rem;
width: 3.5rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
overflow: hidden;
background-clip: padding-box;
border: 3px solid black;
cursor: pointer;
}
.line {
width: 100%;
height: 4px;
border-radius:5px;
background-color: #000;
transition: 0.2s ease-out;
}
.toggle .line1 {
background-color: #e30513;
transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
display: none;
}
.toggle .line3 {
background-color: #e30513;
transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}
.toggle .toggle-menu {
background-color: white;
border: 0;
}
.nav-list {
list-style: none;
padding: 0;
line-height: 0.5;
}
.nav-list-item {
text-align: left;
padding: 1rem 0;
}
.nav-list-item a:hover{
color: white;
}
.nav-link {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
position: relative;
padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
color: white;
}
.nav-link::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
transform: scaleX(0);
transition: 0.4s ease-in-out;
transform-origin: left;
}
.nav-link:hover::before {
transform: scaleX(1);
}
<div class="navigation">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<li class="nav-list-item">Link 1</li>
<li class="nav-list-item">Link 2</li>
</ul>
</nav>
</div>
Output in the IE 11 browser:

Click checked pure hamburger menu on window/document click

This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.

Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>

Having issues with child element showing menu options

I am using Shopify & VUE to create a sidebar menu pulling in shopify linklists. The main links are showing, but the child links are hidden and the toggle/active state is no shoing the dropdown as expected.
Here is a codepen example https://codepen.io/benmoswm/pen/RwPydrm
I have been starting at this for hours but missing something obvious, but not to me. Any advice would be great. thanks
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>Shop</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
{% for link in linklists.main-menu-sidebar.links %}
{% include 'desktop-navigation-link' %}
{% endfor %}
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen"
class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger"
:class="{ 'active' : isBurgerActive }"
#click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>
<style>
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 0;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, .4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit
}
.evergreen-main-subnav {
padding-left: 15px;
margin: 0;
display: none;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-child-menu::after {
content: "\f077"
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg)
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg)
}
</style>
<script>
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
</script>

.You have to make position as absolute on the submenu items.
Update
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
/* common styles */
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding: 0;
font-family: "Lato";
height: 100%;
background-color: #d4d4d4;
}
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 20px;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s;
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, 0.4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px;
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd;
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300;
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0;
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit;
}
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: "FontAwesome";
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center;
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-child-menu::after {
content: "\f077";
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(0.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg);
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>click me</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
<li class="evergreen-main-nav-item evergreen-main-nav-item-has-children">Ceramic Pots <span class="evergreen-child-menu"></span>
<ul class="evergreen-main-subnav">
<li class="mobile-nav__item">Bower</li>
<li class="mobile-nav__item">Wave</li>
</ul>
</li>
<li class="evergreen-main-nav-item">Large Pots</li>
<li class="evergreen-main-nav-item">Pot Stands</li>
<li class="evergreen-main-nav-item">Hanging Pots</li>
<li class="evergreen-main-nav-item">Watering Cans</li>
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen" class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger" :class="{ 'active' : isBurgerActive }" #click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>