We Keep Coding

Navbar dropdown not function onclick

This code was functional but when i implemented it to a new website it is not working.
I'm trying to create a navbar that has a hamburger button but it won't work and I'm not sure why.
I tried to decode the problem but did not manage.
What could be the cause to this problem?
I am using javascript onclick function.
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul .active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>

You had a space between .nav-ul and .active
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul.active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>

Responsive Navigation Transition not working

I cannot get my ease-in transition to work on the navigation bar.
On Mobile when you click the burger, I would like a simple transition sliding in from right to left.
I tried using translateX (0%, 100%) instead of display (none, flex).
I feel like i am missing/forgetting something really simple.
What am I doing wrong / forgetting?
Github Repo_branch
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 850px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.5s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

First, transition has no effect on changing display properties.
It's a good idea to use the transform parameter for example below:
Then a slide-down effect can be achieved.
Demo:
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 3000px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: flex;
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.3s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
transform: translate3d(0, 0, 0);
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

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:

How to trigger checkbox from different area?

I'm facing the problem with my dropdown menu (hamburger menu). I want the menu to dissapear when I click on the list item (link). The hamburger menu is created without javaScript, using checkbox. Is it possible to do that in html/css, or only with jQuery or javaScript?
Here is my website: https://gelezhinis.github.io/ritpaslaugos/
#navbar .menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
#navbar .menu-wrap .toggler {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 80px;
height: 80px;
opacity: 0;
}
#navbar .menu-wrap .hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 80px;
height: 80px;
padding: 1.5rem;
margin-top: 0.8rem;
background: inherit;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
#navbar .menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 3px;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Top & Bottom Lines */
#navbar .menu-wrap .hamburger > div:before,
#navbar .menu-wrap .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 3px;
background: inherit;
}
/* Moves 3rd Line Down */
#navbar .menu-wrap .hamburger > div:after {
top: 10px;
}
/* Toggler Animation */
#navbar .menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
#navbar .menu-wrap .toggler:checked + .hamburger > div:before,
#navbar .menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
#navbar .menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
#navbar .menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
#navbar .menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.75s;
/* background: #eee; */
}
#navbar .menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
/* Hide Menu */
#navbar .menu-wrap .menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .menu-wrap .menu > div {
background: rgba(24, 39, 51, 0.9);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
#navbar .menu-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
#navbar .menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
transition: color 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li > a:hover {
color: #777;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Apie</li>
<li>Paslaugos</li>
<li>Salės</li>
<li>Kontaktai</li>
</ul>
</div>
</div>
</div>
</div>

setTimeout(function() { $(".toggler").click(); },1000)
if you want a delay, otherwise just
$(".toggler").click()
Like this
$(".menu a").on("click", function() {
setTimeout(function() {
$(".toggler").click();
}, 1000)
})
#import url('<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght#700&display=swap" rel="stylesheet">');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Noto Serif', serif;
line-height: 1.4rem;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem 0;
}
/* Utility Classes */
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-primary {
color: black;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
text-transform: uppercase;
}
.btn:hover {
background: #777;
cursor: pointer;
}
.btn:focus {
outline: 0;
}
.btn {
display: inline-block;
color: white;
background: black;
/* border: 2px solid #777; */
border-radius: 4px;
padding: 1rem 2rem;
border: none;
width: 200px;
font-size: 1.5rem;
}
.btn a {
color: inherit;
}
.p-lead {
font-size: 1.3rem;
}
.bg-light {
background: #f4f4f4;
color: black;
}
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
.hall-card {
background: white;
padding: 1rem;
}
/* Navbar */
#navbar {
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
background: black;
color: white;
z-index: 1;
padding: 1rem;
height: 100x;
}
#navbar img {
width: 35%;
margin-left: 1rem;
}
/* #navbar ul {
display: none;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: white;
padding: 0.75rem;
margin: 0 0.25rem;
font-size: 1.5rem;
text-transform: uppercase;
}
#navbar ul li a:hover {
background: #777;
border-radius: 4px;
} */
/* #navbar .menu-wrap {
display: none;
} */
/* #media (max-width: 900px) {
#navbar ul {
display: none;
} */
/* Navbar mobile */
#navbar .menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
#navbar .menu-wrap .toggler {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 80px;
height: 80px;
opacity: 0;
}
#navbar .menu-wrap .hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 80px;
height: 80px;
padding: 1.5rem;
margin-top: 0.8rem;
background: inherit;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
#navbar .menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 3px;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Top & Bottom Lines */
#navbar .menu-wrap .hamburger>div:before,
#navbar .menu-wrap .hamburger>div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 3px;
background: inherit;
}
/* Moves 3rd Line Down */
#navbar .menu-wrap .hamburger>div:after {
top: 10px;
}
/* Toggler Animation */
#navbar .menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
#navbar .menu-wrap .toggler:checked+.hamburger>div:before,
#navbar .menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
#navbar .menu-wrap .toggler:checked:hover+.hamburger>div {
transform: rotate(225deg);
}
/* Show Menu */
#navbar .menu-wrap .toggler:checked~.menu {
visibility: visible;
}
#navbar .menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: 0.75s;
/* background: #eee; */
}
#navbar .menu-wrap .toggler:checked~.menu>div>div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
#navbar .menu-wrap .menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .menu-wrap .menu>div {
background: rgba(24, 39, 51, 0.9);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
#navbar .menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
#navbar .menu-wrap .menu>div>div>ul>li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
#navbar .menu-wrap .menu>div>div>ul>li>a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
transition: color 0.4s ease;
}
#navbar .menu-wrap .menu>div>div>ul>li>a:hover {
color: #777;
}
/* About */
#about {
background: white;
height: 100vh;
color: black;
}
#about .about-content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
height: 80%;
padding: 0 2rem;
}
#about .about-content .image img {
width: 100%;
}
#about .about-content button {
display: inline-block;
color: white;
background: black;
border-radius: 4px;
padding: 1rem 2rem;
border: none;
width: 200px;
font-size: 1.5rem;
}
#about .about-content button:hover {
background: #777;
cursor: pointer;
}
#about .about-content button:focus {
outline: 0;
}
#about .about-content button a {
color: inherit;
}
/* Section: Services */
.items {
display: flex;
padding: 1rem;
margin-top: 4rem;
}
#services .items .item {
flex: 1;
text-align: center;
padding: 1rem;
border-right: 2px solid black;
}
#services .items>*:last-child {
border-right: none;
}
/* Section: Halls */
#halls .halls-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin-top: 2rem;
}
#halls .halls-container img {
width: 300px;
}
/* #halls .halls-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.hall {
margin-bottom: 3rem;
}
.hall p {
width: 380px;
}
.hall img {
width: 100%;
} */
/* Section: Contact */
#contact .contacts {
display: flex;
margin-top: 4rem;
}
#contact .contacts .map {
margin-left: 1rem;
}
#contact .map,
#contact .contact-info {
flex: 1;
}
#contact .contact-info {
display: flex;
flex-flow: column;
text-align: center;
}
#contact .contact-info div {
margin: 0.75rem;
}
/* Footer */
#main-footer {
background: black;
color: white;
}
.footer button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>Apie</li>
<li>Paslaugos</li>
<li>Salės</li>
<li>Kontaktai</li>
</ul>
</div>
</div>
</div>
</div>
</nav>

how to place image behind navbar dropdown

const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
// toggle nav
nav.classList.toggle('nav-active');
// animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
// burger animation
burger.classList.toggle("toggle")
});
}
navSlide();
/* global */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* navbar */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
}
.logo {
color: rgb(181, 181, 181);
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(181, 181, 181);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 2px;
background-color: rgb(181, 181, 181);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width: 768px){
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%)
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-5px);
}
/* header */
header {
font-family: 'Poppins', sans-serif;
}
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text-box h4 {
display: inline-block;
font-size: 30px;
color: #3c4245;
letter-spacing: 5px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
<nav>
<div class="logo">
<h4>Gunnar</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<header>
<div class="containerBox">
<div class="text-box">
<h4>Software Engineer | UX/UI Design</h4>
</div>
<img class="img-responsive" src="./images/header.jpeg" alt="">
</div>
</header>

The issue is the absolute positioning on the .nav-links class inside the media query. Setting the z-index addresses the issue however isn't exactly the best way to approach this problem. Here is a fixed up version:
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
// toggle nav
nav.classList.toggle('nav-active');
// animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
// burger animation
burger.classList.toggle("toggle")
});
}
navSlide();
/* global */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* navbar */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
}
.logo {
color: rgb(181, 181, 181);
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(181, 181, 181);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 2px;
background-color: rgb(181, 181, 181);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
z-index: 999;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%)
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 5px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -5px);
}
/* header */
header {
font-family: 'Poppins', sans-serif;
}
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text-box h4 {
display: inline-block;
font-size: 30px;
color: #3c4245;
letter-spacing: 5px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
<nav>
<div class="logo">
<h4>Gunnar</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<header>
<div class="containerBox">
<div class="text-box">
<h4>Software Engineer | UX/UI Design</h4>
</div>
<img class="img-responsive" src="https://i.imgur.com/dc1PU8j.jpg" alt="">
</div>
</header>