Develop Reference

Responsive navigation bar could not be displayed (hamburger menu)

I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
const close = document.getElementById('close');
if (bar){
bar.addEventListener("click", () => {
nav.classList.toggle("active");
})
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active")
})
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
#E60023
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<img src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png" class="logo" alt="E-commerce logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-shopping"></i></li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar "class="fa-solid fa-bars active"></i></a>
</div>
</section>

you have so little mistake that you unable to see it. be careful next time.your a tag in doesn't have an opener and also has space in your id
<i id="bar "class="fa-solid fa-bars active"></i></a>
thus your
const bar = document.getElementById("bar");
is null
change it to
<a><i id="bar"class="fa-solid fa-bars active"></i></a>
everything else looks fine.
const bar = document.getElementById("bar");
const nav = document.getElementById("navbar");
const close = document.getElementById("close");
if (bar) {
bar.addEventListener("click", () => {
console.log("bar click event");
nav.classList.toggle("active");
});
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active");
});
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<a href="#"
><img
src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png"
class="logo"
alt="E-commerce logo"
/></a>
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar" class="fa-solid fa-bars active"></i>
</div>
</section>

I can't fix my bottom menu in any way on Chrome (while on FIrefox works perfectly)

I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});

You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>

How to combine 2 css file avoiding clash between the 2?

I am working on 2 separate html file for the same project, eventually those files will go into the home page. My problem is the css files, as they have many in common element, which however they look different and will clash.
My question is, what is the best way to merge this css file so not to have any issue?
################## THIS IS CSS FILE 1 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
a {
text-decoration: none;
font-size: 12px;
}
li {
padding: 10px;
cursor: pointer;
background-color: transparent;
color: #ffffff;
}
li:hover {
background-color: #87cefa;
color: #003580;
}
h4 {
text-align: center;
font-size: 33px;
font-weight: 333;
color: #003580;
padding: 12px
}
/* ---------------------------------------
-------------- COMPONENTS ----------------
----------------------------------------*/
label {
padding: 6px;
font-size: 15px;
font-weight: 700;
text-align: center;
width: 120px;
color: #000
}
ul {
list-style-type: none;
padding-left: 21px;
}
ul.horizontal,
ul.horizontal a {
display: flex;
list-style-type: none;
color: white;
}
button {
background-color: #ffffff;
border: 1px solid #003580;
color: #003580;
align-items: center;
border-radius: 6px;
padding: 0 25px;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
resize: none;
outline: 0;
width: 180px;
height: 45px
}
button:hover {
background-color: #87cefa;
color: #003580;
}
i {
margin: 0 12px 0 12px;
}
img {
max-width: 150px;
max-height: 150px
}
input {
width: 150px;
align-self: center;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
resize: none;
outline: 0;
background-color: transparent;
border: transparent;
text-align: center
}
::placeholder {
color: #FFFFFF;
opacity: 1;
}
select,
select.white {
font-size: 15px;
background-color: transparent;
border: transparent;
font-weight: 700;
padding: 6px;
cursor: pointer;
}
select.white {
color: #FFFFFF;
}
select.white:focus {
color: #003580;
}
/* ---------------------------------------
--------------- LAYOUT -----------------
----------------------------------------*/
header {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 9px;
background-color: #003580;
height: 45px;
}
.content_container {
display: flex;
flex-wrap: nowrap
}
.side_navbar {
height: 90vh;
flex: 1;
background-color: #003580;
border-bottom: 6px solid #003580
}
.right_content {
display: block;
flex: 4
}
.all_sections_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.all_sections_container section {
margin-bottom: 18%;
display: none;
width: 90%;
height: 90%;
}
.profile_wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.properties_wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap
}
.properties_wrapper div {
font-size: 12px;
font-weight: 333;
text-align: center
}
.utilities_wrapper,
.favorites_wrapper,
.settings_wrapper,
.offers_wrapper,
.messages_wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
}
.settings_wrapper button,
.utilities_wrapper button {
margin-top: 21px;
}
################## THIS IS CSS FILE 2 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
h4 {
margin: 9px;
padding-left: 9px;
padding-top: 6px;
border-top: 1px solid #eef0f1
}
h5 {
color: #fff;
font-size: 12px
}
h5.h5_dropdown {
margin: 5px 0 -5px 0
}
label {
padding-left: 12px;
cursor: pointer
}
button {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
cursor: pointer;
min-width: 100px
}
button.red {
cursor: pointer;
background-color: #e00000;
color: #fff;
border: thin solid #e00000
}
button.red:hover {
background-color: #f23d3d
}
input[type=checkbox] {
cursor: pointer
}
input[type=number],
input[type=text] {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
min-width: 300px;
text-align: center;
cursor: auto
}
select {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 9px;
height: 45px;
text-align-last: center;
resize: none;
outline: 0;
cursor: pointer;
padding: 3px;
margin: 6px
}
.select_city {
margin-right: -15px
}
.search_box_category_selector_flex_container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
max-width: 51%;
margin-left: 21%
}
.search_box_category_selector_flex_container div {
border: 1px solid gray;
flex: 1;
font-size: 12px;
font-weight: 333;
border-radius: 6px;
padding: 12px;
cursor: pointer;
margin-bottom: -6px;
margin-right: 3px
}
.search_box_flex_main_container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
height: 99px;
background-color: #2b2d2e;
align-items: center
}
.city_select_dropdown_container {
z-index: 2
}
.buildings_select_container {
z-index: 1
}
.bedroom_range_form_container,
.more_form_container,
.price_range_form_container {
position: absolute
}
.price_range_frame {
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
border: thin solid #000;
border-radius: 6px;
padding: 6px 0 6px 7px
}
.bedroom_range_frame {
border: thin solid #000;
background-color: #fff;
padding: 6px 0 6px 8px;
border-radius: 6px
}
.more_form {
color: #000;
background-color: #fff;
display: flex;
flex-direction: column
}
.more_form_container {
margin: 4px 4px;
padding: 4px;
height: 350px;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
border-bottom: 1px solid #000;
border-left: 1px solid #000
}
.more_form_container div {
padding-left: 12px
}
.more_form_bottom_buttons_container {
display: flex;
justify-content: center;
padding: 15px
}
est way to merge this css file so not to have any issue?

I would recommend trying this tool
CSS Compressor & Minifier
It has lots of options, you can compress and/or minify CSS.
Copy both CSS files into a CSS input
Turn on Sort selectors and properties
Obtain output
Manually remove duplicates
Re-enter input
Compress or minify your output

My height for my page does not fill full height? How do I make it responsive?

My height isn't being responsive. I referenced this question:
Why is min-height not working?
but it still isn't working. My site to reference is http://horsescowsandcemeteries.com/.
I want it to work for both desktop and mobile. Thanks.
Vh isn't working.

You can use the "viewport" meta tag to scale your website similarly to the browser version. Simply place the code below into the head element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if you want to fix the body background when scaling, you can use this:
body {
height: fit-content;
}
Before / After

Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to your HTML and add try this css
/*Game Play Screen */
body {
display: flex;
flex-direction: column;
margin: auto;
border: 3px solid green;
padding: 10px;
background-image: url(images/road-bg.jpg);
background-size: cover;
font-family: "Krona One";
text-align: center;
}
main {
display: flex;
flex: 1;
margin-bottom: 25px;
}
#container {
display: flex;
flex: 1;
justify-content: space-around;
}
.team-one, .team-two {
width: 50%;
}
#left-side,
#right-side {
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
}
#instructions {
margin-bottom: 2em;
text-align: center;
background-color: green;
font-size: 140%;
}
#instructionsButton {
background-color: green;
color: white;
padding: 0.5em 1em 0.5em 1em;
text-decoration: none;
font-size: 1.5em;
border-radius: 10px;
}
.teamBox {
color: white;
background: #333;
padding: 1em;
border-radius: 5px;
border: 6px solid white;
width: 160px;
height: 80px;
margin-bottom: 1em;
display: inline-block;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.44);
-moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.44);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.44);
margin: 5em auto;
}
.teamBox h3,
p {
margin-top: 0;
margin-bottom: 0;
}
#scoreTotalTeamOne,
#scoreTotalTeamTwo {
font-size: 2.5em;
}
#endButton {
background-color: #be1e2d;
color: white;
padding: 0.5em 1em 0.5em 1em;
text-decoration: none;
font-size: 2em;
border-radius: 10px;
margin-bottom: 2em;
}
.gameplaybutton {
width: 200px;
height: 200px;
margin: auto;
}
/* First breakpoint, elimates the road */
#media only screen and (max-width: 675px) {
body {
height: auto;
background: url(images/road-bg-sm.jpg);
background-size: cover;
}
.teamBox {
width: 100px;
height: 100px;
}
#instructionsButton{
font-size: 1em;
}
}
/* Second breakpoint */
#media only screen and (max-width: 550px) {
.gameplaybutton {
width: 150px;
height: 150px;
}
}

Max-height reached and the div continuesly goes to right like responsive overflow-x

Is it possible to achieve this layout, Can show me how to that?
CSS
.broad-structure{
display: inline-block;
width: 450px;
border-left: 1px solid #eee;
white-space: normal;
}
.broad-content{
padding: 30px;
}
.structure .veno{
float: left;
margin-right:20px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.desc-pro{
padding: 15px 0;
}
.story{
white-space: normal;
text-align: justify;
}
.nodes{
background-color: rgba(221, 213, 213, 0.11);
height: 100%;
}
.grayz{
background-color: rgba(221, 213, 213, 0.11);
}
.fishy{
background-color: rgba(221, 213, 213, 0.11);
height: 100%;
}
.chandelier{
padding: 30px;
}
.tagline img{
width: 100%;
height: 350px;
}
.cont-struct{
height: 850px;
overflow: hidden;
}
.viso{
display: inline-block;
width: 420px;
border-left: 1px solid #eee;
white-space: normal;
border: 1px solid #eee;
}
.construct{
padding: 30px;
}
.construct h3{
color: rgba(104, 109, 132, 0.58);
font-weight: 700;
margin-top: 20px;
}
.btn-nero {
width: 88%;
}
.setia{
width: 100%;
height: 200px;
cursor: pointer;
}
Here is the DEMO

It is possible to achieve this layout..
add these styles to your wrapper element display: flex ; flex-direction:column; flex-wrap:wrap; and it give it the height and width that you want for the wrapper.
Then in the child put height:200px( or whatever ) and then when the wrapper cannot hold any more elements it will push them onto the next column..
<style>
.broad-structure {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 600px;
border: 1px solid red;
}
.broad-content{
height: 150px;
}
</style>