We Keep Coding

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

React / CSS - float nav bar right with flex boxes?

This is probably a relatively simple CSS situation but now working in React and also trying to display an Image component inline in the nav things are getting difficult -
I have an animated nav I took and tweaked from https://codepen.io/littlesnippets/pen/OyxyRG and I need to float it right. I want to display my Image inline at the same horizontal position as the nav items and float it left so the whole nav looks like:
Here's what I have, which aligns everything to center:
<main className={styles.main}>
<div className={styles.nav}>
<Image className={styles.navIcon} src={icon} width={40} height={40} />
<ul className={styles.snip1168}>
<li className={styles.current}>Work</li>
<li>Recs</li>
<li>Say Hi</li>
</ul>
</div>
CSS:
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Start custom nav */
.nav {
margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
}
.snip1168 a {
padding: 0.5em 0;
padding-top: 2.4em; /* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 a:before {
top: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 a:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
max-width: 100%;
}
I've tried float properties as well as justify-content options. How can I create this alignment?
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navIcon {
display: inline-block;
flex-grow: 1;
}
.nav {
margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
}
.snip1168 a {
padding: 0.5em 0;
padding-top: 2.4em; /* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 a:before {
top: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 a:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
max-width: 100%;
}
.mainText {
text-transform: uppercase;
font-size: 1.1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className={styles.container}>
<main className={styles.main}>
<div className={styles.nav}>
<div className={styles.navIcon}>
<Image src={icon} height={40} width={40} />
</div>
<ul className={styles.snip1168}>
<li className={styles.current}>Work</li>
<li>Recs</li>
<li>Say Hi</li>
</ul>
</div>
</div>
</div>

Quick solution is to set
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 2.4em;
/* coordinates w height of line away from link, MUST BE = */
}
Here is a full snippet
html,
body {
padding: 0;
margin: 0;
font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.navIcon {
display: inline-block;
flex-grow: 1;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 2.4em;
/* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
}
.snip1168 a {
padding: 2.4em 0 0.5em;
/* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 a:before {
top: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 a:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
max-width: 100%;
}
.mainText {
text-transform: uppercase;
font-size: 1.1rem;
}
<div class='container'>
<main class='main'>
<div class='nav'>
<div class='navIcon'>
<img src="https://picsum.photos/40" height={40} width={40} />
</div>
<ul class='snip1168'>
<li class='current'>Work</li>
<li>Recs</li>
<li>Say Hi</li>
</ul>
</div>
</main>
</div>

Here I add some borders just to show where things are. I removed CSS not relevant to the question and showed a rendered HTML set to better illustrate.
.container {
padding: 0 2rem;
border: solid 1px pink;
}
.main {
border: 1px solid green;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
.nav {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
border: solid blue 1px;
}
.navIcon {
display: block;
flex-grow: 1;
padding-left: 1em;
}
.navIcon img {
display: block;
width: 40px;
height: 40px;
border: 1px dashed red;
}
ul.snip1168 {
width: 30%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class='container'>
<main class='main'>
<div class='nav'>
<div class='navIcon'>
<img src="icon" alt="myicon" />
</div>
<ul class='snip1168'>
<li class='current'>Work</li>
<li>Recs</li>
<li>Say Hi</li>
</ul>
</div>
</main>
</div>

Search Bar showing footer when any word is typed in thats not on the product cards

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.
I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.
I hope all of the information provided shows the problem I am experiencing.
[Click the product page to see the problem I am experiencing or click run snippet below][1]
[1]: https://kipplo.co.uk/kipplov2
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

I would just wrap it with id or class and set it min-height:100vh;. Its the easiest way, not the cleanest code. Hope it helped!
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
.wrap-nav-and-main {
min-height: 100vh;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<section class="wrap-nav-and-main">
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

Cannot figure out what's wrong with my eventlistener

So I'm creating an ecommerce website for a project. I've been following a tutorial on youtube. I seem to be having trouble with the script for the project. I've double checked my code, and it's the same as the tutorial, however, the script doesn't run at all.
/* Showing the navigation Menu */
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener('click', () => {
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle', 'nav-menu')
const navLink = document.querySelectorAll('.nav_link'),
navMenu = document.getElementById('nav-menu')
function linkAction() {
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
:root {
/*Header*/
--header-height: 48px;
/*Font*/
--font-medium: 500;
--font-semi-bold: 600;
--font-bold: 700;
--body-font: 'Poppins', sans-serif;
--big-font-size: 20px;
--bigger-font-size: 24px;
--biggest-font-size: 32px;
--h2-font-size: 25px;
--normal-font-size: 15px;
--smaller-font-size: 13px;
/*Colours*/
--dark-color: #141414;
--dark-color-light: #8a8a8a;
--dark-color-lighten: #f2f2f2;
--white-color: #fff;
/*Margins*/
--mb-1: 10px;
--mb-2: 16px;
--mb-3: 24px;
--mb-4: 32px;
--mb-5: 40px;
--mb-6: 48px;
--z-fixed: 100;
--rotate-img: rotate(-30deg);
}
#media screen and (min-width: 768px) {
:root {
--big-font-size: 24px;
--bigger-font-size: 32px;
--biggest-font-size: 48px;
--normal-font-size: 16px;
--smaller-font-size: 14px;
}
}
*,
::before,
::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
/*margin: var(--header-height) 0 0 0;*/
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--dark-color);
line-height: 1.6;
}
h1,
h2,
h3,
pl,
ul {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: var(--dark-color);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.section {
padding: 80px 0px 32px;
}
.section-title {
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: 1.6px;
}
.section-title::after {
content: '';
position: absolute;
width: 56px;
height: 2.88px;
top: -16px;
left: 0px;
right: 0px;
margin: auto;
background-color: var(--dark-color);
}
.bd-grid {
max-width: 1024px;
display: grid;
grid-template-columns: 100%;
column-gap: 32px;
width: calc(100% - 32px);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 768px) {
.nav_menu {
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 32px;
background-color: var(--white-color);
transition: .5s;
}
}
.nav_item {
margin-bottom: var(--mb-4);
}
.nav_logo {
font-weight: var(--font-semi-bold);
}
.nav_toggle,
.nav_shop {
font-size: 20px;
cursor: pointer;
}
.show {
left: 0;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ICONS-->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class="nav_toggle" id="nav-toggle">
<i class='bx bxs-grid'></i>
</div>
Roby
<div class="nav_menu" id="nav-menu">
<ul class="nav_list">
<li class="nav_item">
Home</li>
<li class="nav_item">
Featured</li>
<li class="nav_item">
Women</li>
<li class="nav_item">
New</li>
<li class="nav_item">
Shop</li>
</ul>
</div>
<div class="nav_shop">
<i class='bx bx-shopping-bag'></i>
</div>
</nav>
</header>
<main class="1-main">
</main>
The navigation menu needs to open when the grid icon in the top left is clicked, but it doesn't. It also needs to disappear when clicked again.
I can post the link to the youtube video as well, although it's my first time posting on stackoverflow, so I'm not sure if I'm allowed to.
Please advise.

Toggle Hamburger Menu Javascript

My Hamburger menu is not working properly, that's it is not showing the menu items whenever a user clicks on it. It is however acting properly on the other functionality whenever it is clicked. I have tried every possible trick and i haven't managed to get it to work properly.I am not sure what is the challenge with my javascript because i believe that should be were the issues are. Below is my code:
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
display: none;
opacity: 0;
}
}
.open {
right: 0;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>

You need to remove display:none from your .nav__list, add opacity:1 to .open and also edit your code on mobile version.
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__list {
right: -100%;
opacity: 0;
}
.open{
right: 0;
opacity:1;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
opacity: 0;
}
}
html .open {
right: 0;
opacity:1;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>