Develop Reference

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

How to hide an icon on "font awesome" bar click and display it again when the bar are clicked again

I want the icon with the id logo2 to hide when the "font awesome" bar is clicked and to display when the button is again clicked i.e The nav bar hides it but it shows up when using mobile device's width. Please help.
This is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShaurEducationalComplex</title>
<script src="app.js"></script>
<link rel="stylesheet" tyle="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<!-- This is the first blue block -->
<!-- This is for testing may it works -->
<div class="container7">
<div class="box7">
<div class="container7inside">
<div class="box7inside">
<i id="iconabove" class="fab fa-facebook-f"></i>
</div>
<div class="box7inside">
<i id="iconabove" class="fab fa-twitter"></i>
</div>
<div class="box7inside">
<i id="iconabove" class="fab fa-instagram"></i>
</div>
<div class="box7inside">
<i id="iconabove" class="fab fa-youtube"></i>
</div>
<div class="box7inside">
<i id="iconabove" class="fab fa-whatsapp"></i>
</div>
</div>
<!-- This is for testing may it works -->
</div>
<div class="box7para">
The Institute of Excellence in Education
</div>
<div class="box7para">
<span id="btns">
<!-- <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/home'" type="button">
&nbsp&nbspUK Donor&nbsp&nbsp</button>
<button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/Online-Sadqah'" type="button">
&nbsp&nbspDonate Now&nbsp&nbsp</button> -->
<button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/result'" type="button">
&nbsp&nbspBOARD Results&nbsp&nbsp</button>
</span>
</div>
</div>
<!-- This is the first blue block -->
<!-- This is the coding nepal navigation bar -->
<nav>
<!-- <div class="logo"><img src="Images/dha_es_logo-1.png" alt=""></div> -->
<label for="btn" class="icon">
<span id="_bar_Id_" class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>
<label for="btn-3" class="show">More +</label>
<a href="#">More
<span class="fas fa-caret-down"></span>
</a>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
<li>Pages</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
</nav>
<!-- This is the coding nepal navigation bar -->
<!-- <div><img class="logo2" src="Images/dha_es_logo-1.png" alt=""></div> -->
<div id="logo2"><img src="Images/dha_es_logo-1.png" alt=""></div>
<!-- This is the slideshow -->
<div id="slideshow">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img id="image" src="Images/jmjcoKA.jpg" class="d-block w-100" alt="This is image 1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img id="image" src="Images/2ndpic.jpg" class="d-block w-100" alt="This is image 2">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img id="image" src="Images/weJHcPH.jpg" class="d-block w-100" alt="This is image 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- This is the slideshow -->
<!-- this is the marquee tag -->
<div id="containermarq">
<marquee id="marq" width="80%" direction="right" height="60px">
<div id="txtmarq"> This is a sample scrolling text that has scrolls texts to right.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora ex, consectetur fuga quibusdam quas quae odio! Perspiciatis eaque ex, animi nisi minus harum vero possimus aspernatur adipisci cum ullam exercitationem?
</div>
</div>
</marquee>
<!-- this is the marquee tag -->
<!-- A warm welcome -->
<div class="welcome">
<div id="welcomehead"><div></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbspAbout Us :
<div id="welcomepara">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere repellat fugit blanditiis! Voluptates aliquam distinctio laboriosam quibusdam debitis pariatur, assumenda corrupti dolorum aperiam tempore, vel ad ex exercitationem doloribus explicabo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt facilis vero modi, odit ex delectus asperiores quasi corrupti minus, tempora quos culpa quis ullam non labore dolore. Soluta, debitis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim harum magni, quasi ducimus facilis quidem hic dolores. Facilis quis qui dolores. Deleniti quae, sint eligendi eaque molestiae a dolor perferendis?
<br><br><br><br>
</div>
</div>
</div>
<!-- A warm welcome -->
<div id="welcomehead">
&nbsp&nbsp&nbsp&nbsp&nbspEvents :
</div>
<!-- This is the community support -->
<div class="container3">
<div class="box3">
<img id="img2" src="Images/2ndpic.jpg">
<div class="overlay1">
<div class="text">Art day</div>
</div>
<div class="txtover">Art day</div>
</div>
<div class="box3">
<img id="img2" src="Images/small2.jfif">
<div class="overlay1">
<div class="text">Eid Millan day</div>
</div>
<div class="txtover">Eid Millan day</div>
</div>
<div class="box3">
<img id="img2" src="Images/small3.jfif">
<div class="overlay1">
<div class="text">Food Gala</div>
</div>
<div class="txtover">Food Gala</div>
</div>
<div class="box3">
<img id="img2" src="Images/image1.jfif">
<div class="overlay1">
<div class="text">Fun Factory Trip</div>
</div>
<div class="txtover">Fun Factory Trip</div>
</div>
</div>
<!-- This is the community support -->
<div id="mapbox">
<div id="divsocial">
<div style="border: 1px solid red;margin-left: 20px;color: black;visibility: visible;">SEC on Social Media</div>
<br>
<div id="icondown">
<div><i id="icondf" class="fab fa-facebook-f"></i></div>
<div><i id="icondt" class="fab fa-twitter"></i></div>
<div><i id="icondi" class="fab fa-instagram"></i></div>
<div><i id="icondy" class="fab fa-youtube"></i></div>
<div><i id="icondw" class="fab fa-whatsapp"></i></div>
</div>
</div>
<iframe id="map" src="https://www.google.com/maps/d/embed?mid=1AIsf-4etCQOgWKawr8kp-6CFGp1jsZ-9" width="640" height="480"></iframe>
</div>
<!-- This is for the picture flex box hover -->
<div class="container2">
<div class="box2">
<img id="img2" src="Images/small1.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis,
veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam
</div>
</div>
<div class="box2">
<img id="img2" src="Images/small2.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis,
veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam
</div>
</div>
<div class="box2">
<img id="img2" src="Images/small3.jfif">
<div class="overlay">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis,
veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam d
</div>
</div>
<div class="box2">
<img id="img2" src="Images/2ndpic.jpg">
<div class="overlay">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis,
veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam
</div>
</div>
</div>
<!-- This is for the picture flex box hover -->
<div style="border: 1px solid white;background-color: transparent;width: 100px;height: 100px;"></div>
<!-- This is the bootstrap js -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- This is the bootstrap js -->
</body>
</html>
#btns{
line-height: 0px;
}
#btn3{
margin-bottom: 7px;
background-color:whitesmoke;
color: darkolivegreen;
height: 30px;
}
.btns{
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
}
/* Darker background on mouse-over */
.btns:hover {
background-color: RoyalBlue;
}
.container7{
margin-left:0px;
margin-top: 0px;
width: 100%;
min-height: 40px;
background-color:aliceblue;
border-bottom: 1px solid aliceblue;
/*add flexbox style*/
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
animation-name: fade;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.box7{
width: fit-content;
height: 20px;
box-sizing: border-box;
align-items:center;
text-align: center;
justify-content: center;
}
#iconabove{
margin-top: 10px;
text-align: center;
font-size: 20px;
color:purple;
transition: 0.2s linear;
}
#iconabove:hover{
color:white;
background-color:transparent;
}
.container7inside{
margin-left:0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
width: 100%;
min-height: fit-content;
background:transparent;
/*add flexbox style*/
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.box7inside{
width: 35px;
height: fit-content;
box-sizing: border-box;
display: inline-block;
background: #f1f1f1;
margin: 3px;
box-shadow: 0 5px 15px -5px #00000070;
color:aliceblue;
overflow: hidden;
position: relative;
border-radius: 30%;
}
.box7inside:hover{
transform: scale(1.3);
color:aliceblue;
background-color:#1b1b1b;
}
.box7inside::before{
width: 120%;
height: 120%;
background:transparent;
transform: rotate(45deg);
left: -110%;
transition: 0.2s linear;
top:90%
}
.box7inside:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
#keyframes aaa{
0%{
left: -110%;
top:90%
}50%{
left: 10%;
top:-30%
}100%{
top: -10%;
left: -10%;
}
}
.box7para{
font-size: 18px;
line-height: 40px;
margin-left: 80px;
margin-right: 0px;
color: purple;
}
/* This is for navigation bar */
*{
margin: 0;
padding: 0;
color: white;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background: #1b1b1b;
/* background: radial-gradient(#1b1b1b, black); */
}
nav{
background:purple;
position: relative;
top: 0;
width: 100%;
height: fit-content;
left: 0;
/* background: radial-gradient(#1b1b1b, rgb(15, 15, 46),rgb(49, 48, 65),black); */
}
#logo2{
float: left;
width: 200px;
height: 200px;
background-color: aliceblue;
position: absolute;
top: 40px;
left: 10px;
}
nav::after{
content: '';
clear: both;
display: table;
}
nav ul{
float: right;
list-style: none;
margin-left: 0px;
margin-right: 50px;
line-height: 10px;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background:transparent;
margin: 0 5px;
}
nav ul li a{
color:purple;
background-color:aliceblue;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
position: relative;
z-index: 10000;
text-decoration: none;
color: red;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 5px #66ffff;
}
nav ul ul li a:hover{
position: relative;
z-index: 10000;
color: cyan;
box-shadow: none;
}
nav ul ul li{
background-color: cornsilk;
}
nav ul ul li a{
color: black;
line-height: 50px;
}
nav ul ul li a:hover{
color:orange;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
line-height: 50px;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
line-height: 50px;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
line-height: 50px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
#slideshow{
position: relative;
z-index: -1;
}
#image{
width: 100%;
height: 500px;
}
nav ul ul ul li{
position: relative;
top: -70px;
color: #1b1b1b;
left:150px;
}
/* This is for navigation bar coding nepal */
.fa-caret-down{
margin-left: 40px;
font-size: 15px;
color: black
}
/* second part responsive nav bar */
.show,.icon, input{
display: none;
}
nav ul li ul li a{
color: black;
}
/* responsive part for navigation bar */
#media all and (max-width:690px)
{
#logo2{
top: 80px;
}
}
#media all and (max-width: 968px)
{
nav ul{
margin-right: 0px;
float:left;
color: azure;
}
nav .logo{
padding-left: 0px;
visibility: visible;
position: static;
float: left;
width: auto;
}
nav ul li,nav ul ul li{
display:block;
width: 100%;
}
nav ul ul{
top:70px;
position: static;
border-top: none;
float:none;
display: none;
opacity:1;
visibility: visible;
}
nav ul ul ul li{
position: static;
}
nav ul ul li{
border-bottom: 0px;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
.show{
display: block;
color:purple;
font-size: 18px;
padding: 0 20px;
line-height: 40px;
width: fit-content;
height: 40px;
background-color: white;
cursor: pointer;
}
/* .show1{
color: #1b1b1b;
} */
.show:hover{
color:cyan;
}
.icon{
display: block;
color: white;
position: absolute;
right: 40px;
line-height: 70px;
font-size: 25px;
cursor: pointer;
}
nav ul li a:hover{
box-shadow: none;
}
.show + a,ul{
display: none;
}
[id^=btn]:checked + ul{
display: block;
}
}
* {box-sizing: border-box;}
/* responsive part for navigation bar */
/* second part responsive nav bar*/
/* this is the flex box div */
.container2{
width: 100%;
min-height:300px ;
background-color:purple;
/*add flexbox style*/
display: flex;
flex-direction: row;
border: 1px solid white;
justify-content: space-around;
flex-flow: wrap;
}
.box2{
width: 300px;
border: 1px solid black;
height: 300px;
background:transparent;
margin: 2px;
position: relative;
box-sizing: border-box;
font-size: 50px;
}
#img2
{
display: block;
width: 100%;
height: 100%;
}
/* this is the flex box div */
/* This is image hover effects */
.overlay {
position: relative;
bottom: 0;
background: rgb(0, 0, 0);
background:radial-gradient(rgba(1, 2, 3, 0.1),rgba(3, 4, 5, 0.9)); /* Black see-through */
/* background: #466368;
background: radial-gradient(#648880, #293f50);*/
color: #f1f1f1;
width: 100%;
transition: .5s ease-in-out;
opacity:0;
width: 300px;
height: 300px;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
top: -300px;
float: unset;
bottom: 0px;
}
.box2:hover .overlay {
opacity: 5;
}
/* This is image hover effects */
.welcome{
border:1px solid #1b1b1b;
}
#welcomepara{
margin-left: 0px;
border: 1px solid red;
background-color:purple;
font-size: 40px;
font-weight: lighter;
font-family: 'Times New Roman', Times, serif;
color: orange;
}
/* add responive media queries */
#media screen and (max-width:800px){
.box7para::before{
text-align: center;
}
.box7para{
margin-left: 0px;
}
.container7inside{
margin-left: 0px;
}
}
#media screen and (max-width:900px){
.container7inside::before{
content: "\A";
text-align: center;
white-space: pre;
}
#block2{
text-align: center;
}
.box7para{
margin-left: 0px;
}
.container7inside{
margin-left: 0px;
}
}
#media screen and (max-width:1000px){
.container7inside::before{
content: "\A";
text-align: center;
white-space: pre;
}
.box7para{
margin-left: 0px;
}
.container7inside{
margin-left: 0px;
}
}
#media screen and (max-width:600px){
.container7inside{
margin-left: 0px;
}
.box7para::before{
text-align: center;
}
.box7para{
margin-left: 0px;
}
.container7inside{
margin-left: 0px;
}
}
//**and the javascript is**
document.getElementById("_bar_Id_").onclick = function() {
var x = document.getElementById("logo2");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
And the link to website is to check
https://muhammad-bilal-7896.github.io/School-website/

First of all, your function has "div" that is not defined anywhere.
Second, you can use this code to toggle the visibility of your logo:
document.getElementById("_bar_Id_").onclick = function() {
var x = document.getElementById("logo2");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
Then, just remember to add the "_bar_Id_" to your "font awesome" bar.
<div id="_bar_Id_" class="container7">

Add class active if onclick

I have a menu. I scrolled the function to the item that is listed in the menu. I also want the selected element to appear hr. I get if there is no scroll function, then hr appears in the selected menu. And I need that when the clicks on the menu appears and hr and scroll function. Lets look at link 2 and link 3
$('a.scrollTo').on('click', function(){
// data-scrollTo = section scrolling to name
var scrollTo = $(this).attr('data-scrollTo');
// toggle active class on and off. added 1/24/17
$( "a.scrollTo" ).each(function() {
if(scrollTo == $(this).attr('data-scrollTo')){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
// animate and scroll to the sectin
$('body, html').animate({
// the magic - scroll to section
"scrollTop": $('#'+scrollTo).offset().top
}, 1000 );
return false;
})
var elems = document.querySelectorAll(".one,.two,.three");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click",function(e){
if(document.querySelector(".activeOne")){
document.querySelector(".activeOne").classList.remove("activeOne");
}
e.currentTarget.classList.add("activeOne");
});
}
* {
margin: 0;
padding: 0;
outline: none;
}
body, html {
width: 100%;
height: 100%;
}
#main-header {
background-image: url(../img/background.jpg);
min-height: 100%;max-width: 100%;
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left center;
position: relative;}
.main-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
z-index: 0;
background-image: linear-gradient(to right, #34373a, #696c70);
background-image: -moz-linear-gradient(to right, #34373a, #696c70);
background-image: -webkit-linear-gradient(to left, #34373a, #696c70);
background-image: -ms-linear-gradient(to left, #34373a, #696c70);
}
.header {
position: relative;
z-index: 1;
}
#headet-title {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
margin: 15% 0 0.5% 0;
font-size: 1.7em;
}
#description-header {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
font-size: 1.4em;
width: 50%;
margin: auto;
}
#menu-nav a {
color: white;
text-decoration:none;
color:#fff;
width:120px;
display:inline-block;
text-align:center;
transition:all .33s linear;
-webkit-transition:all .33s linear;
}
ul li {
display: inline;
text-align: center;
}
.two:hover ~ hr {
margin-left: 44%;
}
.three:hover ~ hr {
margin-left: 78%;
}
.scrollTo.activeOne ~ hr {
margin-left: 10%;
}
.two.activeOne ~ hr {
margin-left: 44%;
}
.three.activeOne ~ hr {
margin-left: 78%;
}
hr {
height: .15rem;
width: 12%;
margin: 0;
background: #ff2a58;
border: none;
transition: .3s ease-in-out;
margin-left: 10%;
}
.menu-nav-header {
display: flex;
justify-content: space-between;
padding: 5px;
}
#logo h2 {
color: white;
font-family: 'Cabin Condensed', sans-serif;
}
.button {
text-align: center;
margin-top: 2%;
}
.button a {
color: white;
font-family: 'Cabin Condensed', sans-serif;
text-decoration: none;
border: 1px solid;
padding: 6px 12px 6px 12px;
border-radius: 3px;
font-size: 1.3em;
}
.header-title-border {
height: 2px;
width: 190px;
background-color: #ff2a58;
margin: auto;
margin-bottom: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="scroll/section-scroll.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scroll/jquery.section-scroll.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet">
</head>
<div id="main-header">
<div class="main-overlay"></div>
<div class="header">
<div class="menu-nav-header"> <div id="logo">
<h2>NAME</h2>
</div>
<div id="menu-nav">
<ul>
<li class="one"><a class="scrollTo" data-scrollTo="main-header" href="#">Link 1</a></li>
<li class="two"> <a class="scrollTo" data-scrollTo="content1" href="#">Link 2</a></li>
<li class="three"> <a class="scrollTo" data-scrollTo="content2" href="#">Link 3</a></li>
<hr />
</ul>
</div>
</div>
<div id="headet-title">
<h1 class="wow fadeInDown">Name of Your Company</h1>
</div>
<div class="header-title-border"></div>
<div id="description-header">
<span class="wow fadeInDown">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque voluptate commodi impedit,
vitae vero, quo et odit natus sequi odio reprehenderit expedita voluptatum aspernatur, dolore soluta corporis aliquid animi iure.</span>
</div>
<div class="button">
Get Started
</div>
</div>
</div>
<div id="content1">Hello</div>
Link 2 has content1, which is why hr does not appear, while link 3 has no content2 and hr appears. Help me please

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.

how to make divs stop overlapping each other

I got two main divs in my page: the first one contains an accordion menu and the second one, the main text of the page. When I resize the browser window, both divs overlap each other, like in this picture:
How can I make that stop? I searched a lot to find an answer, but nothing worked. I tried to add overflow: auto;, float: left, I played with the margin... Without success.
Here is my code:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
body#help {
font-size: 3vmin;
/*Background*/
background: #444444; /* For browsers that [are shit enough to] do not support gradients */
background: -webkit-linear-gradient(#1a8cff, #4da6ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1a8cff, #4da6ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1a8cff, #4da6ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1a8cff, #4da6ff); /* Standard syntax */
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.panel {
background-color: #666666;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width:250px;
}
#helpMenuDiv {
display: inline-block;
position: fixed;
top:0px;
bottom: auto;
right: auto;
left: 0px;
width: 270px;
height: 840px;
order: solid 2px black;
overflow: auto;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 250px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active:after {
content: "\2212";
}
#helpPageDiv {
width: 800px;
max-width: 800px;
border: solid 2px black;
margin: auto;
}
<!DOCTYPE html>
<html id="helpHtml">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body id="help">
<!---Introduction--->
<div id="helpPageDiv">
<p>Content of the first div (main text)</p>
</div>
<!---Accordion--->
<div id="helpMenuDiv">
<button class="accordion">Section 1</button>
<div class="panel">
<p class="panelText">Content of the accordion</p>
</div>
<!---More accordions--->
<script src="scripts/accordion.js"></script>
</body>
</html>
Thanks in advance for your answers!

I have two suggestions.
You can give your helpPageDiv a left margin equal to the width of helpMenuDiv using Jquery that changed with window resize.
Try giving width to both helpMenuDiv and helpPageDiv and make them float left. Also you can put your menu above the content div in small screens.
Here's I created a simple example that might be useful to you.
>>> JSFiddle.
Try resizing the result window too.
$('.menu .menu-item h3').click(function() {
$(this).siblings('p').slideToggle();
});
.holder:after{
content: '';
display: block;
clear: both;
}
.menu {
width: 20%;
float: left;
background: #64c1be;
}
.content {
width: 80%;
height: 200px;
float: left;
background: #73c379;
}
.content .inner{
color: #4d4d4d;
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.menu .menu-item {
background: #ddd;
margin: 10px 0;
}
.menu .menu-item h3 {
background: #ccc;
margin: 0;
cursor: pointer;
}
.menu .menu-item p {
margin: 0;
padding: 5px 3px;
display: none;
}
#media (max-width: 550px){
.menu, .content{
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="menu">
Accordian menu
<div class="menu-item">
<h3>
+ Section 1
</h3>
<p>
Menu content
</p>
</div>
<div class="menu-item">
<h3>
+ Section 2
</h3>
<p>
Text Text
</p>
</div>
<div class="menu-item">
<h3>
+ Section 3
</h3>
<p>
faucibus orci
</p>
</div>
<div class="menu-item">
<h3>
+ Section 4
</h3>
<p>
ullamcorper
</p>
</div>
</div>
<div class="content">
Content goes here
<div class="inner">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
</div>
</div>
</div>