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>

Navbar covers my text when in mobile mode

So my issue is when in mobile mode my navbar covers my page context.
In other words parts of my text box that is on the page hides under the navbar.
My navbar CSS looks like this:
.navbar {
background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar-container {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
max-width: 1500px;
}
.navbar-logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
}
.fa-typo3 {
margin-left: 0.5rem;
font-size: 1.8rem;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 10px;
list-style: none;
text-align: center;
width: 60vw;
justify-content: end;
margin-right: 2rem;
}
.nav-item {
height: 80px;
}
.nav-links {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0.5rem 1rem;
height: 100%;
}
.nav-links:hover {
border-bottom: 4px solid #fff;
transition: all 0.2s ease-out;
}
.fa-bars {
color: #fff;
}
.nav-links-mobile {
display: none;
}
.menu-icon {
display: none;
}
#media screen and (max-width: 960px) {
.NavbarItems {
position: relative;
}
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
height: 90vh;
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
}
.nav-menu.active {
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
background-color: #fff;
color: #242424;
border-radius: 0;
}
.navbar-logo {
position: absolute;
top: 0;
left: 0;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.fa-times {
color: #fff;
font-size: 2rem;
}
.nav-links-mobile {
display: block;
text-align: center;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
padding: 14px 20px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #242424;
transition: 250ms;
}
}
how can i stop this from happening ? The navbar works fine when its not in mobile mode.
Ill also add a picture to make it simple to see.

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

Javascript / remove hover after click close button

Help me please!
Show me please how can I remove hover effect after click close button on the right corner?
I can’t figure out how to turn off the effect when you click on the close button
Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it
I'm insert code snippet!
$(".close_help").click(function() {
$('.close_help').removeClass(".product__element");
setInterval(function() {
$('.product__element').addClass('.product__element')
}, 100);
});
// // $(".close-hover").click(function () {
// const resetClose = document.querySelector('.close-hover');
// $(".close-hover").click(function () {
// resetClose.style.display = 'none';
// })
// // $('.product__element').removeClass("product__element");
// // setInterval(function () { $('.product__element').addClass('product__element') }, 500);
// // });
.product__element {
z-index: 9;
background-color: #fbfbfb;
width: 20%;
margin: 2%;
padding: 10px 10px 10px 20px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 5px;
-webkit-transform: translateY(0);
-webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.prodact_sezon {
content: "";
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(196, 196, 196, 0.4);
}
.close_help {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.interact:hover .close_help {
display: block;
}
/* .prodact_sezon .product__element:hover {
transform: scale(02);
} */
.product__element:hover {
background-color: white;
transform: scale(1.02);
box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09);
z-index: 10;
margin-bottom: 0px;
}
.elem123 {
margin-top: -1px;
margin-bottom: 0px;
display: none;
position: absolute;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09);
}
.product__element:hover .elem123 {
display: block;
background: #FFFFFF;
left: 0%;
right: 0%;
margin-bottom: 0%;
padding: 20px;
box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09);
border-radius: 10px;
}
.product__img {
max-width: 80%;
height: auto;
padding-top: -20px;
}
.product__name {
width: 100%;
padding: 1px 5px 10px 5px;
text-align: center;
font-weight: bold;
}
.product__name__two {
width: 100%;
font-size: 15px;
padding: 0px 5px 7px 5px;
text-align: center;
font-weight: regular;
}
.product__description {
width: 100%;
font-size: 14px;
padding: 10px 2px 2px 2px;
text-align: center;
font-weight: regular;
text-rendering: auto;
}
.product__price {
text-align: center;
padding: 10px 5px;
/* border: 1px solid #e2e2e2; */
border-radius: 10px;
margin-bottom: 0px;
color: #edaf26;
font-weight: bold;
z-index: 330;
font-size: 17px;
}
.product__size {
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product__size-element {
width: 48%;
border: 2px solid #e2e2e2;
font-size: 14px;
padding: 5px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 0px;
border-radius: 10px;
}
.product__size-element_active {
border: 3px solid #76AA6F !important;
border-radius: 10px;
}
.product__add-to-cart-button {
width: 100%;
height: 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
-webkit-appearance: none;
border-radius: 10px;
background: #76AA6F;
color: #fff;
cursor: pointer;
margin: 15px 0 0;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
outline: none;
}
.product__add-to-cart-button:hover {
background: #63915D;
-webkit-transition: .3s;
transition: .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__element interact">
<span class="close_help">×</span>
<img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c">
<div class="product__name">
Манго Махачонок
</div>
<div class="product__price">
<span class="product__price-number">220</span> Грн
</div>
<div class="elem123">
<div class="product__size">
<div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт.">
1 шт.
</div>
<div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг">
1 кг.
</div>
</div>
<div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button>
<div class="product__description">
По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий.
</div>
</div>
</div>

While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.
And to turn off the hover, change your jQuery code to
$(".close_help").click(function() {
$('div').removeClass("product__element");
setInterval(function() {
$('div').addClass('product__element')
}, 1000);
});
Here is the working example of how it works.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.