Develop Reference

My image carousel randomly doesn't work, sometimes refreshing fixes it, sometimes it doesn't

My image carousel randomly doesnt work, sometimes when i refresh, it starts working.
However, the textFade function inside the same carousel always works and it is linked to the same counter.
Here are some gifs of my issue:
https://gyazo.com/f94fecd0ce497838699900be07c55a83
https://gyazo.com/c3fc2be324e426a03891f433cdae6ef5
I am not sure how i can make the images from my code show on this question, i have tried to google how to upload the library on to the question, but i have not been able to find a solution.
I am making this for a job application so any help would be deeply appreciated.
// SLIDER
const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");
const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");
let counter = 0;
const size = allImages[0].clientWidth;
next.addEventListener('click', ()=>{
if(counter >= allImages.length - 1){
allSlides.style.transform = 'translateX(0px)';
counter = 0;
textFade();
} else {
allSlides.style.transition = "transform 0.4s ease-in-out";
counter++
allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
textFade();
}
})
prev.addEventListener('click', ()=>{
if(counter <= 0 ){
allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
counter = 3;
textFade();
}
allSlides.style.transition = "transform 0.4s ease-in-out";
counter--
allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
textFade();
})
* {
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/* HEADER */
.navbar-container {
width: 83.5%;
background-color: black;
margin: auto;
padding: 2.2vw 0;
height: 14.1vw;
}
.header-subcontainer {
display: flex;
justify-content: space-between;
width: 71vw;
margin: auto;
position: relative;
z-index: 999;
}
.menu-tab{
visibility: hidden;
position: absolute;
}
.header-container {
width: 80%;
}
.logo-container img{
width: 21vw;
}
.navbar-social {
padding: 0 .45vw 0 .35vw;
height: .7vw;
margin-bottom: -.3vw;
}
.navbar-social:last-of-type {
padding-right: 0;
}
.link-container {
display:flex;
justify-content: right;
width: 60%;
margin: -1vw 0 0 27.15vw;
position: relative;
}
.links {
text-decoration: none;
color:white;
margin-left: 1.7vw;
display: inline-block;
font-size: 1vw;
cursor: default;
}
.links:after {
display: block;
content: '';
border-bottom: 1px solid #ffffff;
transform: scaleX(0);
transition: transform 200ms ease-in-out;
transform-origin: 0% 50%;
}
.links:hover:after {
transform: scaleX(1); transform-origin: 0% 50%;
}
.header-container {
width: 100%;
height: 2vw;
text-align: right;
margin-top: -.8vw;
}
/* ------- SEARCH ------- */
.searchbar {
color: white;
background: none;
border: none;
border-bottom: 2px solid grey;
padding-left: 1.1vw;
padding-bottom: .3vw;
margin-right: 1vw;
margin-left: -.5vw;
width: 100%;
height: 1vw;
font-size: .7vw;
}
.mobile-searchbar {
visibility: hidden;
position: absolute;
}
.search-box{
display: inline-block;
width: 20.8%;
z-index: 100;
}
#hidden-search {
left: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
border-bottom: 2px solid #1f1f1f;
}
#myUL li a {
margin-top: -1px; /* Prevent double borders */
padding: 1vw 0 1vw 0;
text-decoration: none;
font-size: .7vw;
color: white;
display: block
}
.search-content{
width: 16.6vw;
text-align: left;
margin-top: 0px;
background-color: black;
outline: 1px solid #707070;
padding: 0 1vw 2vw 1vw;
color: white;
position: absolute;
visibility: hidden;
z-index: 100;
margin-left: 18.45vw;
}
#myUL h2 {
font-weight: normal;
padding-bottom: .5vw;
}
#myUL span{
font-size: .9vw;
line-height: 1.2vw;
}
::placeholder {
color: white;
}
.search-icon {
position: absolute;
width: .7vw;
margin-left: -.5vw;
margin-top: .2vw;
}
.second-search-icon{
position: absolute;
visibility: hidden;
}
input:focus {
outline: none;
}
/*------- SLIDER -------*/
.slider-container {
width: 71vw;
height: 40vw;
margin: auto;
margin-top: -6.49vw;
z-index: 2;
}
.slider {
margin: auto;
overflow: hidden;
width: 100%;
height: 30vw;
}
.slide {
display: flex;
width: 100%;
height: 100%;
}
#prevBtn {
background-image: url(assets/images/arrow-left.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: rgba(255, 255, 255, 0);
position: relative;
left: 67vw;
top: 1.2vw;
cursor: pointer;
}
#nxtBtn {
background-image: url(assets/images/arrow-right.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: white;
position: relative;
left: 67.8vw;
top: 1.2vw;
cursor: pointer;
}
.sub-slider {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
opacity: 100%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-2 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -6vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-3 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -12vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-background {
width: 41.45vw;
background-color: black;
color: black;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -24vw;
position: relative;
z-index: 3;
}
.close-menu {
position: absolute;
visibility: hidden;
}
.hidden-social {
position: absolute;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>World Barista Cup</title>
</head>
<body>
<div id="overlay">
<!-- HEADER -->
<header class="navbar-container">
<div class="header-subcontainer">
<div class="logo-container">
<img src="assets/images/logo-white.png" alt="">
</div>
<div class="header-container">
<img class="search-icon" src="assets/images/search.svg" id="search-icon" alt="" onclick="rotateSearchIcon();showData();" >
<img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
<img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
<div class="search-box">
<input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()" class="searchbar" placeholder="search">
<div class="search-content" id="hidden-search">
<ul id="myUL">
<img class="second-search-icon" src="assets/images/search.svg" alt="">
<input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()" class="mobile-searchbar" placeholder="search">
<li><a href="#" onclick="firstPopup()">
<h2>Wonderful Copenhagen 2021</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
<li><a href="#" onclick="secondPopup()">
<h2>The most expensive coffee on the market</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</li></a>
<li><a href="#" onclick="thirdPopup()">
<h2>10 types of coffee beans you need to know</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
<li><a href="#" onclick="fourthPopup()">
<h2>Challenge your barista skills to the max</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
</a></li>
</ul>
</div>
</div>
<img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
<img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
<img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
<img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
<br>
</div>
</div>
<!-- MOBILE MENU -->
<div class="link-container">
<nav id="hidden-menu">
<div>
About us
Events
Nordic roaster
Results
Links
Contact
<div class="hidden-social">
<img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
<img class="menu-social" src="assets/images/twitter-white.svg" alt="">
<img class="menu-social" src="assets/images/instagram-white.svg" alt="">
<img class="menu-social" src="assets/images/facebook-white.svg" alt="">
</div>
</div>
</nav>
</div>
</header>
<!-- SLIDER -->
<section class="slider-container">
<div class="slider">
<div class="slide">
<img src="assets/images/Coffee_1.png" alt="">
<img src="assets/images/Coffee_2.png" alt="">
<img src="assets/images/Coffee_3.png" alt="">
</div>
</div>
<button id="prevBtn"></button>
<button id="nxtBtn"></button>
<div class="sub-slider" id="slide-text-1">
<p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
</div>
<div class="sub-slider-2" id="slide-text-2">
<p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
</div>
<div class="sub-slider-3" id="slide-text-3">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
<div class="sub-slider-background">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
</section>

I suspect it has to do with the JS.
The easiest way I know how to set up the plus/minus arrows for the slidshow is this:
HTML
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
CSS
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
JS
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

For some reason when the page loads for the first time const size = allImages[0].clientWidth; returns 0.only gets the value on refreshing.
so what i did was instead of const i wrote let size=""; let size be empty string then i am assigning the value inside the button which seems to work.have no idea why it doesnt do it the first time.
and i changed the images for here and your buttons were empty,also changed the css of .slider:width to 50%
// SLIDER
const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");
const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");
let counter = 0;
let size="";
next.addEventListener('click', ()=>{
size = allImages[0].clientWidth;
if(counter >= allImages.length - 1){
allSlides.style.transform = 'translateX(0px)';
counter = 0;
/* textFade();*/
} else {
allSlides.style.transition = "transform 0.4s ease-in-out";
counter++
allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
/* textFade();*/
}
})
prev.addEventListener('click', ()=>{
size = allImages[0].clientWidth;
if(counter <= 0 ){
allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
counter = 3;
/* textFade();*/
}
allSlides.style.transition = "transform 0.4s ease-in-out";
counter--
allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
/* textFade();*/
})
* {
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/* HEADER */
.navbar-container {
width: 83.5%;
background-color: black;
margin: auto;
padding: 2.2vw 0;
height: 14.1vw;
}
.header-subcontainer {
display: flex;
justify-content: space-between;
width: 71vw;
margin: auto;
position: relative;
z-index: 999;
}
.menu-tab{
visibility: hidden;
position: absolute;
}
.header-container {
width: 80%;
}
.logo-container img{
width: 21vw;
}
.navbar-social {
padding: 0 .45vw 0 .35vw;
height: .7vw;
margin-bottom: -.3vw;
}
.navbar-social:last-of-type {
padding-right: 0;
}
.link-container {
display:flex;
justify-content: right;
width: 60%;
margin: -1vw 0 0 27.15vw;
position: relative;
}
.links {
text-decoration: none;
color:white;
margin-left: 1.7vw;
display: inline-block;
font-size: 1vw;
cursor: default;
}
.links:after {
display: block;
content: '';
border-bottom: 1px solid #ffffff;
transform: scaleX(0);
transition: transform 200ms ease-in-out;
transform-origin: 0% 50%;
}
.links:hover:after {
transform: scaleX(1); transform-origin: 0% 50%;
}
.header-container {
width: 100%;
height: 2vw;
text-align: right;
margin-top: -.8vw;
}
/* ------- SEARCH ------- */
.searchbar {
color: white;
background: none;
border: none;
border-bottom: 2px solid grey;
padding-left: 1.1vw;
padding-bottom: .3vw;
margin-right: 1vw;
margin-left: -.5vw;
width: 100%;
height: 1vw;
font-size: .7vw;
}
.mobile-searchbar {
visibility: hidden;
position: absolute;
}
.search-box{
display: inline-block;
width: 20.8%;
z-index: 100;
}
#hidden-search {
left: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
border-bottom: 2px solid #1f1f1f;
}
#myUL li a {
margin-top: -1px; /* Prevent double borders */
padding: 1vw 0 1vw 0;
text-decoration: none;
font-size: .7vw;
color: white;
display: block
}
.search-content{
width: 16.6vw;
text-align: left;
margin-top: 0px;
background-color: black;
outline: 1px solid #707070;
padding: 0 1vw 2vw 1vw;
color: white;
position: absolute;
visibility: hidden;
z-index: 100;
margin-left: 18.45vw;
}
#myUL h2 {
font-weight: normal;
padding-bottom: .5vw;
}
#myUL span{
font-size: .9vw;
line-height: 1.2vw;
}
::placeholder {
color: white;
}
.search-icon {
position: absolute;
width: .7vw;
margin-left: -.5vw;
margin-top: .2vw;
}
.second-search-icon{
position: absolute;
visibility: hidden;
}
input:focus {
outline: none;
}
/*------- SLIDER -------*/
.slider-container {
width: 71vw;
height: 40vw;
margin: auto;
margin-top: -6.49vw;
z-index: 2;
}
.slider {
margin: auto;
overflow: hidden;
width: 50%; /*changed from 100 to 50*/
height: 30vw;
}
.slide {
display: flex;
width: 100%;
height: 100%;
}
#prevBtn {
background-image: url(assets/images/arrow-left.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: rgba(255, 255, 255, 0);
position: relative;
left: 67vw;
top: 1.2vw;
cursor: pointer;
}
#nxtBtn {
background-image: url(assets/images/arrow-right.svg);
background-size: cover;
width: 1.5vw;
height: 1.5vw;
border: none;
background-color: white;
position: relative;
left: 67.8vw;
top: 1.2vw;
cursor: pointer;
}
.sub-slider {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
opacity: 100%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-2 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -6vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-3 {
width: 41.45vw;
background-color: black;
color: white;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -6vw;
position: relative;
top: -12vw;
opacity: 0%;
transition: opacity 300ms;
z-index: 4;
}
.sub-slider-background {
width: 41.45vw;
background-color: black;
color: black;
margin-left: 5.8vw;
font-size: 1.7vw;
line-height: 2.2vw;
padding: 3.8vw 4vw;
margin-top: -24vw;
position: relative;
z-index: 3;
}
.close-menu {
position: absolute;
visibility: hidden;
}
.hidden-social {
position: absolute;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>World Barista Cup</title>
</head>
<body>
<div id="overlay">
<!-- HEADER -->
<header class="navbar-container">
<div class="header-subcontainer">
<div class="logo-container">
<img src="assets/images/logo-white.png" alt="">
</div>
<div class="header-container">
<img class="search-icon" src="assets/images/search.svg" id="search-icon" alt=""
onclick="rotateSearchIcon();showData();">
<img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
<img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
<div class="search-box">
<input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()"
class="searchbar" placeholder="search">
<div class="search-content" id="hidden-search">
<ul id="myUL">
<img class="second-search-icon" src="assets/images/search.svg" alt="">
<input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()"
class="mobile-searchbar" placeholder="search">
<li><a href="#" onclick="firstPopup()">
<h2>Wonderful Copenhagen 2021</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
<li><a href="#" onclick="secondPopup()">
<h2>The most expensive coffee on the market</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</li></a>
<li><a href="#" onclick="thirdPopup()">
<h2>10 types of coffee beans you need to know</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
<li><a href="#" onclick="fourthPopup()">
<h2>Challenge your barista skills to the max</h2>
<span class="search-publish">Published 12/0/21<br></span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
officia mini...</span>
</a></li>
</ul>
</div>
</div>
<img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
<img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
<img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
<img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
<br>
</div>
</div>
<!-- MOBILE MENU -->
<div class="link-container">
<nav id="hidden-menu">
<div>
About us
Events
Nordic roaster
Results
Links
Contact
<div class="hidden-social">
<img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
<img class="menu-social" src="assets/images/twitter-white.svg" alt="">
<img class="menu-social" src="assets/images/instagram-white.svg" alt="">
<img class="menu-social" src="assets/images/facebook-white.svg" alt="">
</div>
</div>
</nav>
</div>
</header>
<!-- SLIDER -->
<section class="slider-container">
<div class="slider">
<div class="slide">
<img
src="https://images.unsplash.com/photo-1558909552-8fcf7c94b575?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="">
<img
src="https://images.unsplash.com/photo-1571867424485-ca624c51c157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="">
<img
src="https://images.unsplash.com/photo-1517789807669-59c1043388b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvZmZlZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
alt="">
</div>
</div>
<button id="prevBtn">prev</button>
<button id="nxtBtn">next</button>
<div class="sub-slider" id="slide-text-1">
<p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
</div>
<div class="sub-slider-2" id="slide-text-2">
<p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
</div>
<div class="sub-slider-3" id="slide-text-3">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
<div class="sub-slider-background">
<p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
</div>
</section>

Opacity causing a weird behaviour when using translate on list-items

const navbar = document.querySelector('.navbar');
let scrolled = false;
window.onscroll = function() {
if(window.scrollY > 100) {
navbar.classList.remove('top');
if(!scrolled) {
navbar.style.transform = 'translateY(-70px)';
}
setTimeout(() => {
navbar.style.transform = 'translateY(0px)';
scrolled = true;
}, 200);
} else {
navbar.classList.add('top');
scrolled = false;
}
}
const hamMenu = document.querySelector('#ham-menu');
const listItems = document.querySelectorAll('.item-list li');
loadEventListeners();
function loadEventListeners() {
hamMenu.addEventListener('click', extendMenu);
}
function extendMenu(e) {
hamMenu.style.transform = 'scale(1.5)';
setTimeout(() => hamMenu.style.transform = 'scale(1)', 300);
if(hamMenu.classList.contains('closed')) {
listItems.forEach(item => {
item.style.transform = 'translateX(0vw)'
});
hamMenu.classList.remove('closed');
} else {
listItems.forEach(item => {
item.style.transform = 'translateX(100vw)'
});
hamMenu.classList.add('closed');
}
}
const message = document.querySelector('#message');
const heightLimit = 200;
message.oninput = function() {
message.style.height = ""; /* Reset the height*/
message.style.height = message.scrollHeight + 'px';
}
/* UTILITIES */
/* Buttons */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.btn:hover {
transition: all 0.15s ease-in-out;
transform: scale(1.05);
opacity: 0.85;
}
.btn:active {
transform: scale(1.1);
}
/* Text */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
/* Background */
.bg-primary {
background: var(--primary);
color: #fff;
}
.bg-secondary {
background: var(--secondary);
color: #fff;
}
.bg-light {
background: var(--light);
color: #333;
}
.bg-dark {
background: var(--dark);
color: #fff;
}
.bg-white {
background: #fff;
color: #333;
}
.bg-outline {
background: transparent;
color: #fff;
border: 1px #fff solid;
}
/* Flex Icons */
.flex-icons {
display: flex;
justify-content: space-around;
padding: 3rem;
width: 100%;
}
.flex-icons .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex: 1;
padding: 1rem 2rem;
}
.flex-icons img {
width: 20rem;
border-radius: 50%;
margin-bottom: 3rem;
}
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-row.flex-reverse {
flex-direction: row-reverse;
}
.flex-row .column {
flex-basis: 100%;
flex: 1;
}
.flex-row img{
object-fit: cover;
width: 100%;
height: 100%;
}
.flex-row .column .column-1,
.flex-row .column .column-2 {
height: 100%;
}
.flex-row .column .column-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 2.5rem;
}
.flex-row .column .column-2 h4 {
font-weight: bold;
}
.flex-row .column .column-2 h2 {
font-size: 4rem;
margin: 1rem 0 2rem;
font-weight: 300;
}
.flex-row .column .column-2 p {
margin-bottom: 3rem;
}
/* Flex Grid */
.flex-grid {
padding: 2rem 2rem 4rem;
}
.flex-grid .row {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-grid .row .column {
flex-basis: 100%;
padding: 0 0.3rem;
}
.flex-grid .row .column img {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
}
.flex-grid .row .column img:hover {
opacity: 0.9;
transform: scale(1.02);
}
.flex-grid .grid-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 1rem;
}
.flex-grid .grid-content h2 {
font-size: 4rem;
font-weight: 300;
margin: 2rem 0 3rem;
}
/* MAIN STYLE */
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
/* Colors */
--primary: #28a745;
--secondary: #0284d0;
--light: #f4f4f4;
--dark: #333;
}
html {
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
font-size: 1.6rem;
color: #333;
background: #fff;
}
h1, h2, h3 {
font-weight: 400;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
/* Hero */
.hero {
background: url(../img/showcase.jpg) no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero.blog-page {
height: 30vh;
background: url(../img/blog/blog-home.jpg) no-repeat center center/cover;
}
.hero.blog-page .content h1 {
font-size: 4rem;
}
.hero.blog-page .content h1 span {
font-weight: bold;
font-style: italic;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.hero * {
z-index: 1;
}
.hero .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}
.hero .content h1 {
font-size: 6.5rem;
font-weight: 300;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
.hero .content p {
font-size: 2.2rem;
font-weight: 300;
margin: 1.5rem 0 3rem;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
/* navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
opacity: 0.8;
color: #f4f4f4;
position: fixed;
top: 0;
width: 100%;
height: 7rem;
padding: 0 3rem;
transition: all 0.4s ease-in;
}
.navbar.top {
background: transparent;
}
.navbar a {
color: #fff;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar ul li a {
padding: 1rem 2rem;
margin: 0 0.5rem;
}
.navbar ul li a:hover {
border-bottom: 2px var(--primary) solid;
}
.navbar .logo {
transition: all 0.2s ease-in-out;
}
.navbar .logo:hover {
transform: scale(1.05);
}
.navbar .logo span {
font-weight: bold;
font-style: italic;
}
.navbar #ham-menu {
cursor: pointer;
}
/* Flex Icons */
.flex-icons .box i {
background: var(--primary);
color: #fff;
padding: 1.5rem;
border-radius: 50%;
margin-bottom: 2rem;
}
.flex-icons .box h3 {
margin-bottom: 2rem;
font-weight: bold;
font-size: 2rem;
}
/* Team */
#team .flex-icons .box h4 {
margin-bottom: 1rem;
}
#team .team-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 5rem 3rem;
}
#team .team-content h4 {
font-size: 1.8rem;
}
#team .team-content h2 {
font-size: 4.5rem;
font-weight: 300;
margin: 2rem 0;
}
/* Contact Form */
#contact .contact-form {
padding: 2rem;
width: 100%;
}
#contact .contact-form .form-control label {
display: block;
}
#contact .contact-form .form-control input,
#contact .contact-form textarea {
width: 100%;
height: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
border: 1px #ddd solid;
border-radius: 0.5rem;
font-family: 'Roboto', sans-serif;
}
#contact .contact-form textarea {
height: 15rem;
resize: vertical;
overflow: hidden;
}
#contact .contact-form .form-control input:focus,
#contact .contact-form textarea:focus {
outline: none;
border: 1px var(--primary) solid;
}
#contact .contact-form .form-control input::placeholder,
#contact .contact-form textarea::placeholder {
font-family: 'Roboto', sans-serif;
opacity: 1;
}
#contact .contact-form button {
display: inline-block;
}
#contact .column-2 h2 {
padding-left: 2rem;
}
/* Footer */
.footer {
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer a {
color: #fff;
margin: 0 1.5rem;
}
.footer a:hover {
color: var(--primary);
}
.footer a i {
transition: 0.2 all ease-in-out;
}
.footer a i:hover {
transform: scale(1.1);
}
.footer a i:active {
transform: scale(1.15);
}
.footer p {
margin-top: 2rem;
}
.footer p span {
font-style: italic;
font-weight: bold;
}
/* Post Page */
.post .post-1 {
padding: 3rem;
}
.post img {
width: 50rem;
border-radius: 1rem;
display: block;
margin: 3rem auto;
}
.post .post-1 h2 {
font-size: 4rem;
font-weight: 300;
padding-top: 0.5rem;
}
.post .post-1 p {
margin-bottom: 2rem;
}
/* Extra */
.item-list li {
/* display: none; */
transition: all 0.5s ease;
transform: translateX(100vw);
}
.item-list .fa-bars {
transition: all 0.3s ease;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/5c96e2fbe8.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/style.css" />
<title>EdgeLedger</title>
</head>
<body id="home">
<header class="hero">
<div class="navbar top">
<h1 class="logo">
<a href="index.html">
<span class="text-primary"
><i class="fas fa-book-open"></i> Edge</span
>Ledger
</a>
</h1>
<nav>
<ul class="item-list">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
<i id="ham-menu" class="fa-solid fa-bars closed"></i>
</ul>
</nav>
</div>
<div class="content">
<h1>The Sky Is The Limit</h1>
<p>Join us on our mission to change the world</p>
<a href="#about" class="btn bg-primary">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</header>
<main id="about">
<!-- About: Services -->
<section class="services" id="services">
<div class="flex-icons">
<div class="box">
<i class="fa-solid fa-coins fa-2x"></i>
<h3>Financial Advice</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-chart-column fa-2x"></i>
<h3>Stock Analysis</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-handshake-angle fa-2x"></i>
<h3>Collaborations</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
</div>
</section>
<!-- About: Solutions -->
<section id="solutions">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/meeting-2.jpg" alt="image" />
</div>
</div>
<div class="column bg-primary">
<div class="column-2">
<h4>What you're looking for</h4>
<h2>Our reputation speaks for us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="#solutions" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Cases -->
<section id="cases">
<div class="flex-grid">
<div class="grid-content">
<h4>This is what we do</h4>
<h2>Business Cases</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
voluptatum.
</p>
</div>
<div class="row">
<div class="column">
<img src="img/cases/cases1.jpg" alt="" />
<img src="img/cases/cases2.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases3.jpg" alt="" />
<img src="img/cases/cases4.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases5.jpg" alt="" />
<img src="img/cases/cases6.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases7.jpg" alt="" />
<img src="img/cases/cases8.jpg" alt="" />
</div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog">
<div class="flex-row flex-reverse">
<div class="column">
<div class="column-1">
<img src="img/blog/blog-home.jpg" alt="image" />
</div>
</div>
<div class="column bg-secondary">
<div class="column-2">
<h4>Blog | May 23 2022</h4>
<h2>Our recent restructuring plan</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="blog.html" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team">
<div class="team-content">
<h4>Who we are</h4>
<h2>Our Professional Team</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
expedita?
</p>
</div>
<div class="flex-icons">
<div class="box">
<img src="img/team/Chief Executive Officer.jpg" alt="" />
<h4>Jane Smith</h4>
<p>Chief Executive Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Operating Officer.jpg" alt="" />
<h4>John Doe</h4>
<p>Chief Operating Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Marketing Officer.jpg" alt="" />
<h4>Sara Rogers</h4>
<p>Chief Marketing Officer</p>
</div>
</div>
</section>
<section id="contact">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/contact.jpg" alt="image" />
</div>
</div>
<div class="column bg-light">
<div class="column-2">
<h2>Contact Us</h2>
<form class="contact-form">
<div class="form-control">
<label for="name"></label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
/>
</div>
<div class="form-control">
<label for="email"></label>
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
/>
</div>
<div class="form-control">
<label for="phone"></label>
<input
type="text"
name="phone"
id="phone"
placeholder="Contact Number"
/>
</div>
<textarea
name="message"
id="message"
placeholder="Message"
></textarea>
<button type="submit" class="btn bg-primary">Send</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="footer bg-dark">
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
</div>
<p>
All Rights Reserved © 2022,
<span class="text-primary">Edge</span>Ledger
</p>
</footer>
<!-- Scripts -->
<script src="src/app.js"></script>
</body>
</html>
I'm relatively new to HTML/CSS and JavaScript and could really use some help on this one, as I've tried my best but to no avail. I will include the relevant code at the end. Thank you so much for your help in advance!
I'm experiencing some very weird behaviour with trying to animate a navbar menu. Basically, this is a part of a larger project in one of the courses that I'm taking, and I decided to redo the entire project and add more features here and there and experiment.
In the navbar (within the ul) I've decided to add a Font Awesome icon for a menu, then translate the list-items out of the view-port. When clicked, the icon triggers a function in the JavaScript file that translates the list-items into their place on the navbar, then translates them out of the view-port when pressed again. This is of course accompanied by a transition, and works/looks really well for a discount navbar menu.
One thing to explain before I ask my question is that there's another JavaScript function that turns the navbar's background from fully transparent to 80% opacity when scrolling further than 70px from the top, and turns it back to fully transparent when reaching the top again. Screenshot-1 (at the top) - Screenshot-2 (scrolled).
The problem is, when the navbar's background is at 80% opacity, a weird behaviour occurs where the navbar's background loses it's opacity and only the list-items retain the 80% opacity. This is an example. It gets even worse when I hover over it like in this screenshot. When clicking the menu icon again to retract them out, something even weirder like this sometimes happens, while the background on the navbar regains its correct opacity.
After trying a few things like removing the hover effect, not including the icon in the ul,..etc, I noticed that if I just set the opacity of the navbar to the default value 1, this weird behaviour stops, but I want to know why is this happening, as I don't want to simply give up on the slight transparency on the navbar.
I'm sure there's something I'm missing or not aware of, and I would love to learn this now to avoid a similar issue in the future. Is the opacity the issue, or is there something else causing this?
The relevant code is below. I may leave out some unnecessary CSS code in my CSS utility file that I'm certain doesn't have an effect on this. Here's a screenshot of how the header makes sense of the full header tag and its elements.

The property opacity affects on the whole elements not only background. You can use only background-color property to achieve what you want.
You can change the background color like this where c is the alpha(opacity) value. You can also use rgba(51,51,51,0.8) which is equivalent of #333c.
.navbar {
background-color: #333c;
}
.navbar.top {
background-color: transparent;
}
You can either just change the background color from javascript
navbar.style.backgroundColor = '#333c' // when scrolled
navbar.style.backgroundColor = 'transparent' // when scrolled

trying to place a bottom bar along side with a responsive sidebar

I have been trying to build a website layout with a responsive sidebar and a bottom navbar --both of which have a fixed position--
I want the bottom navbar to get pushed and resized by the sidebar in wider viewports.
I have tried using flexbox utility in css and bootstrap , but that didn't solve anything. I had the position property of the bottom navbar set to absolute and i wrapped it in a container with the maion content of the page, but that also didn't work
var sideBarOpen = false;
function openNav(){
document.getElementById("sideNav").style.width = "250px";
// document.getElementById("main").style.marginLeft = "250px";
// document.getElementById("main").style.opacity = "0.1";
document.getElementById("main").style.filter = "blur(2px)";
sideBarOpen = true;
}
function closeNav(){
document.getElementById("sideNav").style.width = "0";
// document.getElementById("main").style.marginLeft = "0";
// document.getElementById("main").style.opacity = "1";
document.getElementById("main").style.filter = "blur(0)";
sideBarOpen = false;
}
$( document ).click(function( event ) {
var target = $( event.target );
if(!target.is("#sideNav") && !$("#sideNav").has(event.target).length && !target.is(".sidebar-toggle") && sideBarOpen){
closeNav();
}else if(target.is(".sidebar-toggle")){
openNav();
}
});
// $("body").click(function (e) {
// });
html{
height: 100%;
width: 100%;
margin: 0;
}
body{
width: 100%;
height: 100%;
margin: 0;
font-family: "Lato", sans-serif;
}
/* .wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.container{
min-height: 100vh;
min-width: 100vh;
margin: 0;
transition: .2s;
} */
/* .container {
margin: 270px;
transition: .2s;
} */
.side-nav {
width: auto;
min-width: 270px;
/* min-height: 100vh; */
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x:hidden ;
padding-top: 60px;
transition: 0.2s;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #f1f1f1;
}
.side-nav .close-btn {
position: absolute;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: inherit;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
display: none;
}
#main {
padding: 20px;
width: 100%;
margin-left: 270px;
transition: all .2s;
}
.bottom-nav{
position: fixed;
display: flex;
justify-content:space-evenly;
align-content:stretch;
background-color: #0080ffd7;
width: 100%;
bottom: 0;
margin: 0;
/* max-width: inherit;
min-width: inherit; */
overflow: auto;
/* text-align: center; */
}
.bottom-nav a{
float: left;
width: 100%;
text-align: center;
padding: 12px 0;
transition: all 0.3 ease;
color: azure;
font-size: 25px;
text-decoration: none;
border: none;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: #6eaec280;
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.sidebar-toggle{
display: none;
transition: .1s;
}
.bottom-nav span{
color: azure;
font-size: 15px;
display: block;
}
.bottom-nav i{
color: azure;
font-size: 25px;
display: block;
}
.bottom-nav a:hover{
background-color: #4355aa;
border: 1px solid;
border-color:#6eaec280;
box-shadow: inset 0 0 20px hsla(241, 49%, 55%, 0.5), 0 0 20px rgba(58, 174, 219, 0.2);
outline-color: rgba(199, 42, 42, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
a.active {
background-color:#af684c ;
}
#media screen and (max-height:450px){
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#media screen and (max-width: 992px){
.side-nav{
width: 0;
min-width: 0;
min-height: 0;
}
#main {
margin: 0;
}
/* .container {
min-height: 100vh;
min-width: 100vh;
margin: 0;
} */
.bottom-nav{
margin: 0;
}
.sidebar-toggle{
display: inline;
}
}
<!doctype html>
<html lang="en">
<head>
<title>UI look</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="side-nav" id="sideNav">
<span class="close-btn" onclick="closeNav()">× </span>
<div>
<section>
<h3>Services</h3>
Home
About
</section>
<section>
<h3>Account</h3>
Login
Register
</section>
</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<div id="main">
<span class="sidebar-toggle" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis doloremque, natus cum nulla quos, aperiam id non enim, quo incidunt alias. Tempore mollitia incidunt asperiores dignissimos accusamus ducimus expedita excepturi!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio dolorum tenetur corrupti eum sunt ut excepturi tempora magnam, quisquam doloribus, error veritatis possimus quidem saepe. Error totam facilis quod harum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid aliquam veritatis, esse necessitatibus neque officia, error iste ipsum non recusandae praesentium odit fugiat atque, eveniet dignissimos! Earum dolore voluptates iure.</p>
</div>
<div class="bottom-nav" id="bottomNav">
<i class="fas fa-home"></i><span>main</span>
<i class="fas fa-bell"></i><span>notifications</span>
<i class="fas fa-question"></i><span>help</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js" integrity="sha512-53CQcu9ciJDlqhK7UD8dZZ+TF2PFGZrOngEYM/8qucuQba+a+BXOIRsp9PoMNJI3ZeLMVNIxIfZLbG/CdHI5PA==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

As I see it you have 2 options:
1.Leave the HTMl as is, and using jQuery determine the width of the bottom bar when the sidebar is open:
$(window).resize(function(){
if($(window).width() > 1024){
$('.bottom-nav').width($(window).width() - $('.side-nav').width())
}
})
2.Use a container for both the side-nav and the bottom-nav and set its position to fixed or absolute. (this will only work if as I understood when the sidebar is open, the main content shouldn't be accessible and should be blurred)

Javascript isn't working for click on hamburger to open and close the hamburger

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device.width, user.scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA Compatible" content="ie-edge">
<title>Nature Tours | Home</title>
<!--Ion Icons-->
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aldrich&display=swap" rel="stylesheet">
<!--Our own stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="nav-brand">
<a href="index.html">
<img src="" alt="">
</a>
</div>
<div class="menu-icons open">
<i class="icon ion-md-menu"></i>
</div>
<ul class="nav-list">
<div class="menu-icons close">
<i class="icon ion-md-close"></i>
</div>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Destinations
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Booking
</li>
<li class="nav-item">
About
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="main-message">
<h3>The great outdoor</h3>
<h1>Adventure</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsa sequi, nam amet dolores quasi repudiandae quam reprehenderit doloremque at corrupti possimus, consequatur officia blanditiis qui maxime eaque similique! Quaerat!
</p>
<div class="cta">
Book now
</div>
</div>
</div>
</section>
</body>
<script src="js/script.js"></script>
</html>
That is my html and i think there are no spelling mistakes
/*Global Style*/
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: inherit;
}
html{
font-family: 'Nunito', sans-serif;
font-size: 10px;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
p{
font-size: 1.6rem;
}
img{
width: 100%;
max-width: 100%;
height: auto;
}
section{
padding: 5rem 0;
}
body{
background-color: cornflowerblue;
}
/*Header*/
header{
width: 100%;
height: 5rem;
/*position: absolute;
top: 0px;
left:0px;
z-index: 1;*/
}
.container{
width: 100%;
max-width: 98rem;
margin: 0 auto;
padding: 0 1.5rem;
}
nav{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,.2)
}
.nav-brand{
width: 2rem;
}
.menu-icons i{
font-size: 3.5rem;
color: #fafafa;
cursor: pointer;
}
.close i{
color: #eb648c;
}
.nav-list{
width: 25rem;
height: 100vh;
background-color: #d7d4ed;
position: fixed;
top: 0;
right: -26rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1500;
transition: all 650ms ease-in-out;
}
.nav-list.active{
right: 0;
}
.close{
position: absolute;
top: 1rem;
left: 1.5rem;
}
.nav-item{
margin: 1.5rem 0;
}
.nav-link{
font-size: 1.6rem;
text-transform:uppercase;
color: rgba(0,0,0,.7);
}
That is my css and, again, I think there is nothing wrong with it
//function expression to select elements
const selectElement = (s) => document.querySelector(s);
//open the menu on click
selectElement('.open').addEventListener('click', () => {
selectElement('.nav-list').classList.add('active');
});
//close the menu on click
selectElement('.close').addEventListener('click', () => {
selectElement('.nav-list').classList.remove('active');
});
Lastly that is my javascript and I think something must be wrong on this one. What I was trying to do is to add a class when you clicked on the hamburger. Then when you clicked on the X to close it would remove that class (active). Now the problem is, that I don't know why it isn't working. Everything seems to be pointing to the right direction, and I just cant find the error here, especially because I've been following a tutorial and everything works perfectly for him so I don't know why mine doesn't
the tutorial was made back in august 18 2019 so it isn't old by any means, if you can find the error I would appreciate it SOO much.

This code works my friend. Check your imports.
I placed these in root with the index.html
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

JS click event listener doesn't trigger function as expected

I'm trying to add a click event listener to a div that should then change a css style in another element. I'm basically trying to make a model window. When the div/button is clicked, it should change the display property from 'none' to 'border-box'. Clicking the div doesn't seem to be having any effect, however. I've tried console logging and nothing shows up there either. When I move the div (that is being clicked) and put it in a different part of the HTML doc it seems to work fine tho. Super confused.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scott Munro - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- nav bar -->
<nav class="navbar">
<a id="home-link" href="#top"></a>
<ul class="icon-list">
<li class="github-icon icon"><i class="fab fa-github"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-linkedin"></i></li>
<li class="codepen-icon icon"><i class="fab fa-codepen"></i></li>
</ul>
<ul class="header-list">
<li class="nav-link">About</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
</ul>
</nav> <!-- end of navbar -->
<div class="header-title">
<h1>Scott Munro</h1>
<h2>Web Developer</h2>
<div class="section-divider"></div>
</div>
<div class="scrolling">
<div id="top"></div> <!-- allows smooth scroll to top of page -->
<img src="layer-front3.png" class="layer" id="layer-one"></img>
<img src="layer1b.png" class="layer" id="layer-oneb"></img>
<img src="layer2.png" class="layer" id="layer-two"></img>
<img src="layer3.png" class="layer" id="layer-three"></img>
<img src="layer4.png" class="layer" id="layer-four"></img>
</div>
<div id="sun"></div>
<div id="sky"></div>
</header>
<!-- Sections: -->
<!-- INTRO -->
<section class="section-background intro-color">
<div class="intro-container container">
<p>Hi, I'm Scott! I'm a developer based in Berlin who is available for hire. I'm passionate about building apps with clean, tested and maintainable code. I have an aptitude for problem solving and a hunger for continuous improvement. I am looking to work as part of a team where I can contribute to a meaningful project whilst continuing to learn from my peers.</p>
</div>
</section>
<!-- ABOUT -->
<section class="section-background about-color">
<div class="about-container container">
<h2 id="about-section">About Me</h2>
<div class="section-divider"></div>
<img id="head" src="img/8bit_head.jpg" alt="head" class="responsive">
<p></p>
<div class="about-skills" class="about-box">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>SASS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ruby</li>
<li>Rails</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
</ul>
</div>
<a id="resume-button" href="cv.pdf" download>Download Resume
<div id="file-icon"></div>
</a>
</div> <!-- end of about container -->
</section>
<!-- PROJECTS -->
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Portfolio Site</h3>
<div class="project-image project-two"></div>
<p class="project-description">Mea novum iusto dignissim ne, zril convenire forensibus duo an, ne pri dicant dolores omittantur. Nam ex fugit deseruisse, no stet iuvaret conceptam vix. Sit ut tempor epicurei expetendis, ne mel odio suscipit disputando, ut choro munere sit.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Calculator</h3>
<div class="project-image project-three"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Javascript To-do App</h3>
<div class="project-image project-four"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div> <!-- Modal for projects windows -->
</div> <!-- end of project container -->
</section>
<div class="clearfix"></div> <!-- clear fix below Projects section -->
<!-- CONTACT -->
<section class="section-background contact-color">
<div id="contact-container" class="container">
<div id="contact-header">
<h2 id="contact-section">Get in Touch</h2>
<div class="section-divider"></div>
</div>
<p>Email me directly at <strong>simunro (at) hotmail (dot) co (dot) uk</strong> or fill out the form below. Be sure to check out my <span href="" class="form-link">Github</span>, <span class="form-link">LinkedIn</span> and <span class="form-link">Codepen</span> accounts too!</p>
<form action="https://formspree.io/simunro#hotmail.co.uk" method="POST">
<label>Name: </label>
<input type="text" name="name" id="name"><br>
<label>Email: </label>
<input type="email" name="_replyto"><br>
<label>Message: </label>
<textarea placeholder="Please leave your message here..." required></textarea><br>
<input type="submit" value="Send" id="send-button">
</form>
</div> <!-- end of contact container -->
</section>
<!-- FOOTER -->
<footer>
<ul class="icon-list">
<li class="github-icon icon"><i class="fab fa-github"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-linkedin"></i></li>
<li class="linkedin-icon icon"><i class="fab fa-codepen"></i></li>
</ul>
<div class="copyright"><p>&copyScott Munro 2018</p></div>
<div class="section-divider"></div>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
And the Javascript:
document.querySelector('#modal-btn').addEventListener('click',
function() {
document.querySelector('.modal').style.display = 'border-box';
});
And CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Titillium Web, Arial, sans-serif;
font-size: 1rem;
}
/*NAV BAR*/
.navbar {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
background-color: #222222;
}
.navbar ul {
float: right;
margin-top: 1rem;
}
.header-list {
margin-right: 2rem;
}
.navbar li {
display: inline-block;
padding: 0.8rem;
}
.navbar a {
color: white;
text-transform: uppercase;
letter-spacing: 0.6em;
text-decoration: none;
font-size: 0.8em;
}
.navbar a:hover {
color: #FFD03F;
}
.fab {
font-size: 1.8rem;
color: white;
}
.fab:hover {
color: #FFD03F;
}
#home-link {
float: left;
background-image: url(img/house_white.png);
background-size: 80%;
background-repeat: no-repeat;
margin: 25px 0px 0px 30px;
width: 40px;
height: 40px;
}
/*PARALLAX JUMBO*/
header {
width: 100%;
height: 720px;
}
.scrolling {
position: relative;
margin: auto;
width: 100%;
height: 600px;
z-index: 1;
}
.layer {
width: 100%;
height: 600px;
background-size: cover;
position: fixed;
}
#layer-one {
position: fixed;
height: 800px;
top: -60px;
left: 0;
z-index: -1;
}
#layer-oneb {
position: fixed;
height: 700px;
top: 60px;
left: 0;
z-index: -2;
}
#layer-two {
/*background-image: url('layer2.png');*/
left: 0;
top: 50px;
z-index: -4;
}
#layer-three {
/*background-image: url('layer3.png');*/
height: 700px;
top: -15px;
left: 0;
z-index: -3;
}
#layer-four {
/*background-image: url('layer4.png');*/
top: 65px;
left: 0;
z-index: -5;
}
#sun {
position: relative;
left: 80%;
z-index: -5;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #FFD03F;
box-shadow: 0px 0px 40px 20px #FFD03F;
animation: sunrise 6s ease-out forwards;
}
#sky {
position: relative;
top: -2rem;
z-index: -6;
width: 100%;
height: 600px;
background: linear-gradient(darkblue, #FFD03F);
animation: sky 6s ease-out forwards;
}
/*TITLE*/
.header-title {
position: absolute;
top: 150px;
left: 400px;
float: left;
z-index: 1;
text-align: center;
animation: fade 7s forwards;
}
.header-title h1 {
font-size: 4.7rem;
color: white;
letter-spacing: 0.6rem;
opacity: 0.3;
}
.header-title h2 {
font-size: 2.5rem;
color: white;
opacity: 0.3;
}
.header-title .section-divider {
width: 40%;
opacity: 0.3;
background-color: white;
}
/*SECTIONS*/
.section-background {
font-size: 1rem;
margin: 0 auto;
padding: 6rem 2rem 7rem 2rem;
z-index: -8;
}
.container {
width: 60%;
margin: 0 auto;
padding: 5rem 0;
background-color: white;
opacity: 0.9;
padding: 3rem;
}
.intro-color {
background-color: #07337A;
z-index: 8;
}
.about-color {
background-color: white;
}
.projects-color {
background-color: white;
position: relative;
}
.contact-color {
background-color: #ddd;
}
#top { /*enables smooth scrolling on home icon link*/
position: absolute;
top: -40rem;
}
/*INTRO SECTION*/
.intro-container p {
font-size: 2rem;
}
/*ABOUT SECTION*/
.about-container {
background-color: #07337A;
color: white;
box-shadow: 2rem 2rem 50rem 2rem grey;
}
.about-container p {
font-size: 1.3rem;
padding: 0 1rem 2rem 1rem;
line-height: 3rem;
}
.about-container h2 {
font-size: 2.6rem;
text-align: center;
padding: 2rem;
}
.about-box {
border: 1px solid black;
padding: 1.6rem;
margin: 3rem 1.5rem 3rem 0;
display: inline-block;
}
#resume-button {
border: 2px solid black;
padding: 1rem 4rem 1rem 1rem;
box-shadow: 3px 3px 5px black;
background-color: white;
text-decoration: none;
color: black;
transition: 700ms;
float: right;
}
#resume-button:hover {
background-color: #5c5292;
color: white;
}
#file-icon {
display: inline-block;
position: absolute;
top: 0.8rem;
right: 1rem;
width: 2rem;
height: 2rem;
background: url(img/file.png) no-repeat;
}
.about-skills li {
display: inline-block;
list-style-type: none;
padding: 0.3rem;
margin: 0.3rem;
border: 1px solid white;
border-radius: 5px;
}
.responsive { /*to make image responsive*/
width: 100%;
height: auto;
}
#head {
float: left;
width: 30%;
margin-right: 3rem;
}
/*PROJECTS SECTION*/
.projects-container h2 {
text-align: center;
padding: 3rem 0 1.6rem 0;
font-size: 2.6rem;
}
.projects-container {
width: 80%;
}
.project {
position: relative;
float: left;
width: 40%;
height: 400px;
border: 1px solid black;
padding: 2%;
margin: 4.5%;
text-align: left;
font-size: 0.9rem;
box-shadow: 0 0 5rem #b7b7b7;
}
.project-image {
width: 37%;
height: 45%;
float: left;
background-size: cover;
background-position: center center;
border: 1px solid black;
margin: 1rem 1rem 0 0;
}
.project p {
padding: 1rem 0;
}
.project-icons {
width: 100%;
position: absolute;
bottom: 1%;
left: 0;
font-size: 1rem;
padding: 8px;
}
.project-btn {
float: left;
border: 1px solid black;
padding: 7px 20px;
margin: 0 5px;
border-radius: 4px;
box-shadow: 3px 3px 10px grey;
}
.project-icons .fab {
color: black;
border: none;
font-size: 2.6rem;
padding: 0;
margin-right: 10px;
}
.project-three {
background-image: url(img/calculator.jpg);
}
.project-four {
background-image: url(img/todo.png);
}
.clearfix {
clear: both;
}
/*PROJECTS MODAL*/
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
/*CONTACT SECTION*/
#contact-container {
padding: 0;
width: 50%;
clear: both;
}
#contact-container h2 {
text-align: center;
font-size: 2.4rem;
margin: 1.2rem;
padding: 2rem 4rem 0 4rem;
}
#contact-header {
width: 100%;
margin: 0 auto;
padding: 0 0 3% 0;
background-color: #07337A;
color: white;
}
.section-divider {
width: 24%;
height: 4px;
margin: 0 auto 3rem auto;
background-color: lightblue;
}
#contact-container {
box-shadow: 0 0 100px #555555;
}
#contact-container p {
padding: 2.6rem;
text-align: center;;
font-size: 1.7rem;
}
.form-link {
color: #1158C8;
}
form {
margin: 0 auto;
width: 100%;
background-color: white;
text-align: center;
}
form label {
display: block;
padding: 0.7rem 0;
}
form textarea {
height: 14rem;
}
input, textarea {
display: inline-block;
width: 80%;
border: 1px solid black;
padding: 0.5rem;
margin: 0 auto;
}
#send-button {
margin: 3rem auto;
border: 1px solid #222222;
padding: 0.5rem;
box-shadow: 5px 5px 20px #333333;
background-color: #09429D;
color: white;
font-size: 1rem;
letter-spacing: 0.3rem;
transition: 400ms;
}
#send-button:hover {
background-color: #07337A;
cursor: pointer;
}
/*FOOTER*/
footer {
position: absolute;
height: auto;
width: 100%;
background-color: #222222;
}
footer li {
list-style: none;
display: inline-block;
padding: 1rem;
}
.icon-list {
width: 12rem;
height: 4rem;
margin: 0 auto;
}
.copyright p {
width: 100%;
margin: 0 auto;
text-align: center;
letter-spacing: 0.4em;
font-size: 1rem;
padding-bottom: 1rem;
color: white;
background-color: #222222;
}
footer .section-divider {
background-color: white;
margin-bottom: 1.5rem;
border: 0.5px solid white;
height: 1px;
width: 11rem;
}
/*KEYFRAMES*/
#keyframes sky {
from {top: 10px;}
to {top: -170px;}
}
#keyframes sunrise {
from {top: 450px;}
to {top: 210px;}
}
#keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
/*MEDIA QUERIES*/
/*Small:*/
#media only screen and (max-width: 600px) {
html {font-size: 10px;}
.container {width: 100%;
padding: 8px;
margin: 0;
}
#contact-container {width: 100%;}
.projects-container {width: 100%;}
.layer {width: 100vw;
height: 100vh;
object-fit: cover;}
.section-background {padding: 0;}
.header-title h1 {font-size: 24px;}
.header-title {left: 70px;
top: 160px;
}
}
#home-link {display: none;}
}

Border-box doesn't work for the display property. As David mentioned border-box is for box-sizing. Your JS works fine, I would I've tossed it into a snippet for you:
document.querySelector('#modal-btn').addEventListener('click',
function() {
console.log('working');
document.querySelector('.modal').style.display = 'block';
});
.modal {
display: none;
}
#modal-btn {
cursor: pointer;
}
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse
consequat deterruisset ex.</p>
<div class="project-icons">
<i class="fab fa-github project-btn"></i>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div>
<!-- Modal window -->
</div>
<!-- end of project container -->
</section>
I changed display: border-box to display: block and that functions. I also added a console log to show that it is firing when you click the button.