We Keep Coding

Why doesn`t work my popup, although I connect Js?

Yesterday I made a popup in Html, Css and JS but it didn`t work.
Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...
In a other project from me the popup works with the same code...
What shall I do that it works? Or what is the mistake in the code?
function togglePopup() {
document.getElementById("popup").classList.toggle("active");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#pop-up {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
#pop-up.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
}
#popup.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup active" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".
Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".
So to work properly you should change the following:
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
Then change:
<div class="popup" id="pop-up">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>

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>

How can I increase height of navbar after hamburger toggle?

I included a working example of my code, and here is my problem. I made my own hamburger menu icon and used #media and overflow: none to place my nav items under the navbar, hidden from view when a viewport of 900px or less is achieved.
My goal is to increase the height of the navbar to reveal nav items once the hamburger has been toggled. What is the best logic/ formatting I can use to achieve this?
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
nav.nav {
background: black;
max-height: 30vh;
padding: 0 2rem;
overflow: hidden;
transition: height 1s ease-in-out;
}
nav.nav .nav-bar {
justify-content: space-between;
}
nav.nav .nav-bar .brand a {
font-size: 2.2rem;
display: inline;
position: relative;
top: 1rem;
}
nav.nav .nav-bar .nav-list {
display: flex;
margin: 0rem;
align-items: center;
}
nav.nav .nav-bar .nav-list .nav-item {
display: flex;
font-size: 1.4rem;
padding: 1rem;
position: relative;
}
nav.nav .nav-bar .social-media {
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
}
nav.nav .nav-bar .social-media .icons i {
color: white;
padding: 0 0.4rem;
font-size: 1.4rem;
}
nav.nav .nav-bar .hamburger {
position: absolute;
top: 3%;
left: 80%;
}
nav.nav .nav-bar .hamburger .menu-btn {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.5s ease-in-out;
border: 3px solid #fff;
border-radius: 10px;
}
nav.nav .nav-bar .hamburger .menu-btn .menu-btn-burger {
width: 20px;
height: 3px;
background: white;
border-radius: 5px;
box-shadow: 0 1px 2px white;
transition: all 0.5s ease-in-out;
}
nav.nav .nav-bar .hamburger .menu-btn .menu-btn-burger::before,
nav.nav .nav-bar .hamburger .menu-btn .menu-btn-burger::after {
content: "";
position: absolute;
width: 20px;
height: 3px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 2px white;
transition: all 0.5s ease-in-out;
}
nav.nav .nav-bar .hamburger .menu-btn .menu-btn-burger::before {
transform: translateY(-8px);
}
nav.nav .nav-bar .hamburger .menu-btn .menu-btn-burger::after {
transform: translateY(8px);
}
/* Hamburger animation */
nav.nav .nav-bar .hamburger .menu-btn.open .menu-btn-burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
nav.nav .nav-bar .hamburger .menu-btn.open .menu-btn-burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
nav.nav .nav-bar .hamburger .menu-btn.open .menu-btn-burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.collapse {
height: 30rem;
}
<nav class="nav">
<div class="nav-bar flex-row">
<div class="brand">
David Anthony
<div class="hamburger">
<div class="menu-btn">
<div class="menu-btn-burger"></div>
</div>
</div>
</div>
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Categories</li>
<li class="nav-item">Contact</li>
</ul>
<div class="social-media">
<div class="icons">
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>
</div>
</div>
</div>
</nav>

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>

Make dropdown menu in css like in the picture

I have questions about how to reproduce the following:
I have the menu like this:
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</nav>
But, I don't know how to make the drop-down list like the picture shown above.
I hope someone can help me. Thank you in advance!

Hey This is what You want :) I hope
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: red;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 25.6px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: red;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
}
<nav>
<ul class="nav__cat">
<li class="nav__li">Menu 1</li>
<li class="nav__li">Menu 23
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 345
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 4567</li>
<li class="nav__li">Menu 56789</li>
</ul>
</nav>

For starters, you obviously will need some content in each of the menus!
Make sure to open this in the full page.
There is still a lot more styling work that needs to be done to achieve the result you want, but hopefully this helps you get moving in the right direction.
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

Here a fiddle of improved #Our_Benfactors answer
fiddle
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>