We Keep Coding

my carousel items are gone on the webpage but it worked before adding some new things

I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}

Figuring out why a specific bit of CSS is not being applied as intended

I am working on a secondary theme for a site of mine (a dark theme). & I can not understand why a specific bit of CSS is not being applied to a particular element, even though it is being applied on another element that is identical.
URL to the site: https://phpstack-726541-2423367.cloudwaysapps.com/ Toggle the switch in the top right hand corner to enable the dark theme. You can see that it only applies it to the 'Header' & not the 'Footer' even though it can be seen that they both use the same classes through Inspect element.
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('light');
document.querySelector('.navbar').classList.toggle('light');
document.querySelector('button').classList.toggle('light');
document.querySelector('#menu-btn').classList.toggle('light');
document.querySelector('.wve-editor-player').classList.toggle('light');
});
/* video editor */
body { padding: 90px 0; background-color: #101010;}
#media screen and (max-width: 568px) {
body { padding: 0; }
body > .container { margin: 0; padding: 0; }
body > .container > .card { border: 0; border-radius: 0; background-color: transparent !important;}
}
.navbar { background-color: #191919; height: 89px; border-bottom: solid 1px #414040; box-shadow: 1px 1px #414040;}
.big { font-size: 120%; }
.small { font-size: 80%; }
.code { max-height: 500px; padding: 5px; overflow: auto; background-color: #eee; }
.btn[disabled] { cursor: not-allowed; color: #fff; background-color: #6c757d; border-color: #6c757d; }
.shadow-1 { box-shadow: 0 0 10px rgba(0,0,0,0.5); }
video,
audio { width: 100%; box-sizing: content-box; }
/* logo */
.logo { color: #0099FF; font-size: 20px; }
.logo img { width: auto; max-width: 200px; margin: -69px; margin-top: -6.9%; padding-left: 50px;}
.logo a { text-decoration: none; }
/* colors */
.bg-white { background-color: #fff; }
.color-blue { color: #236bf1; }
.color-red { color: #f13d2a; }
/* common */
.no-margin { margin: 0 !important; }
.no-wrap { white-space: nowrap; }
.show-on-hover-parent { position: relative; }
.show-on-hover { position: absolute; top: 10px; right: 10px; display: none; }
.show-on-hover-parent:hover .show-on-hover { display: block; }
.card-default { background-color: #F5F5F5; }
.display-inline-block { display: inline-block; }
.btn { cursor: pointer; border-radius: 6EM; border: solid 1px #0099FF;}
.btn:hover { background-color: #CCC; color: #000;}
#import-bttn {background-color: #0099FF; color: #FFF !important;}
.text-ellipsis { display: block; text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.max-height300 { max-height: 300px; overflow: auto; }
.relative { position: relative; }
.position-absolute { position: absolute; }
.pos-absolute-left { left: 15px; top: 15px; }
.pos-absolute-right { right: 15px; top: 15px; }
.pos-absolute-bottom-left { left: 15px; bottom: 15px; }
/* login */
.card-login { margin-top: 150px; }
.card-login form { margin-bottom: 0; }
/* margins */
.margin-top { margin-top: 1rem; }
.margin-bottom { margin-bottom: 1rem; }
.margin-vert { margin-top: 1rem; margin-bottom: 1rem; }
#media screen and (max-width: 768px) {
.margin-bottom-md { margin-bottom: 1rem; }
}
/* button */
/* .btn {background-color: #161616;} */
.btn:not(.btn-link) { transition: box-shadow 0.3s ease; }
.btn:not(.btn-link):hover { box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.btn[class*="-outline"] { transition: background-color 0.3s ease; background-color: #0099FF; border: solid 1px #101010; color: #FFF !important;}
.btn-icon [class^="icon-"] { line-height: 1.4rem; }
.btn-smp { padding: 0.6rem 1.5rem; }
.btn-outline-info { border-color:#CCC; color: #9E9E9E !important;}
.control-buttons {padding: 0 13px; font-size: 13px; line-height: 36px; margin: 0px 6px; float: right;}
#editor-controls {margin-top: 40px;}
/* form fields */
.form-control[type="text"],
.form-control[type="email"],
.form-control[type="number"],
.form-control[type="password"],
textarea.form-control { background-color: #f1f1f1; box-shadow: inset 0 0 5px rgba(0,0,0,0.1); }
textarea.form-control:focus { background-color: #f1f1f1; }
input[type="range"] { width: 100%; padding: 0; }
.input-range { padding: 7px; border: 1px solid #ddd; border-radius: 4px; }
/* dropdown-menu */
.dropdown-menu { box-shadow: 0 0 10px rgba(0,0,0,0.3); }
/* editor-player */
.wve-editor-player { position: relative; background-color: #161515; border:solid 1px #404040; border-radius: 6px;}
.wve-editor-player video { width: 100%; height: 360px; border-radius: 6px;}
.wve-editor-player-panel { position: absolute; left: 0; bottom: 0; width: 100%; padding: 5px 20px; background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7); opacity: 1; transition: opacity 300ms; }
.wve-editor-player .time { float: right; }
.wve-editor-player .time-current { float: left; }
.wve-editor-player:hover .wve-editor-player-panel { opacity: 0; }
/* list-group */
.list-group { }
.list-group .list-group-item.active .btn-link { color: #fff; }
.list-group .list-group-item .btn-link { max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; border: none;}
.list-group-item a,
.list-group-item .btn-link { text-decoration: none; }
span.btn.btn-link:hover { background: none; }
/* editor-timeline */
.editor-timeline-wrapper { position: relative; }
#wve-timeline { position: relative; width: 100%; height: 20px; z-index: 11; overflow: hidden; background: none transparent; border: 0; }
#wve-timeline .ui-slider-handle { z-index: 12; width: 12px; height: 20px; top: 0; margin-left: -6px; margin-top: 0; background: none transparent; border: 0; outline: none; }
#wve-timeline .ui-slider-handle:before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; }
#wve-timeline .ui-slider-handle:after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #000000 transparent; }
#wve-timeline-range { position: absolute; left: 0; top: 0; width: 100%; height: 20px; z-index: 12; border: 1px solid rgba(0,0,0,0.2); background: none #eee; border-radius: 0; box-shadow: none !important; }
#wve-timeline-range .noUi-connect { background: none #aaa; }
.noUi-horizontal .noUi-origin { z-index: 10 !important; }
.noUi-horizontal .noUi-connects:first-child + .noUi-origin { z-index: 5 !important; }
.noUi-horizontal .noUi-handle.noUi-handle-lower { height: 20px; border: 0; top: -1px !important; background: none transparent; box-shadow: none; }
.noUi-horizontal .noUi-handle.noUi-handle-lower:before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; background-color: transparent; }
.noUi-horizontal .noUi-handle.noUi-handle-lower:after { content: ''; display: block; position: absolute; bottom: 0; top: auto; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #000000 transparent; background-color: transparent; }
/* btn-group-justified */
.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified .btn,
.btn-group-justified .btn-group { flex: 1; }
.btn-group-justified .btn { width: 100%; }
/* progress bar */
.progress { border: none; }
#wve-user-stat {display: none;}
/* preloader */
.wve-preloader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1111; background-color: rgba(0,0,0,0.5); }
.wve-preloader-inner { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -150px; width: 300px; max-width: 100%; z-index: 1112; padding: 15px; background-color: #fff; border-radius: 6px; }
.wve-preloader-caption { padding: 0 0 15px 0; text-align: center; }
.wve-preloader-content { height: 20px; background: url("../img/preloader.gif") center center no-repeat; }
.wve-preloader-progress { }
.wve-preloader-progress .progress { border: 1px solid #b1b1b1; }
.wve-preloader-progress .progress-bar { width: 0; height: auto; overflow: hidden; padding: 2px 0 0 0; }
.wve-preloader-progress .progress-bar-empty { padding-top: 20px; }
/* bottom-list-container */
.bottom-list-container { max-height: 338px; overflow: auto; }
.bottom-list-container td { min-width: 150px; }
/* episode-item */
.wve-episode-container { margin: 0; padding: 0; }
.episode-item { float: left; margin-top: 15px; padding: 15px 5px; }
.episode-item > .card { border-color: rgba(0,0,0,.7); background: url("../img/preloader_circle.gif") no-repeat center center transparent; opacity: 1; overflow: hidden; }
.episode-item .card-block { min-height: 80px; background: none no-repeat center center transparent; background-size: cover; }
.episode-item > .card:hover { background-image: none; }
.episode-item > .card:hover .card-block { opacity: 0.3; }
#wve-episode-container {padding: 0px 55px 0px 55px;}
/* video-thumbnail */
.video-thumbnail { min-height: 150px; background: #eee url("../img/icon_film.png") center center no-repeat; }
/* wve-time-selected-inputs */
#wve-time-selected-inputs { width: 340px; position: absolute; left: 0; top: -56px; display: none; }
#wve-time-selected-inputs .card-block { background-color: #b6b6b6; }
#wve-time-selected-inputs .card-block input.form-control { background-color: #a5a5a5; color: #fff; }
#wve-time-selected-inputs .card-block input.form-control:focus,
#wve-time-selected-inputs .card-block input.form-control:active { border-color: #6f6f6f; }
.card { border: none; background-color: transparent;}
.form-group { margin-top: 16px; margin-bottom: 1rem; }
#footer { background-color: #FFF; border-top: solid 1px #CCC; box-shadow: 1px 1px 1px 1px#ececec; display: none; }
#footer-padding { padding: 10px 9px 9px 40px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background-color: #0099FF; width: 6px; border-radius: 6px; }
/* light theme css */
body.light { background-color: #F9F9F9; }
div.navbar.light { background-color: #FFF; border-bottom: solid 1px #CCC; box-shadow: 1px 1px #ececec}
button.btn.light { background-color: #FFF; background-color: #FFF; color: #909090 !important; border: solid 1px #CCC;}
div.wve-editor-player.light { background-color: #DDD; border: 1px solid #DDD;}
<div class="navbar nav-expand fixed-top light" id = "header">
<div class="col-md-2 order-md-10 text-right">
<div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" class="custom-control-input switch" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>
<div class="dropdown d-inline-block">
<button class="btn btn-lg btn-outline-info light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon-menu"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#" data-toggle="action" data-action="profile">
<span class="icon-user-tie"></span>
<?php echo $lang['profile']; ?>
</a>
<?php if( $user['role'] == 'admin' ): ?>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="<?php echo $config['base_url'] . $config['home_url']; ?>?action=users">
<span class="icon-users"></span>
<?php echo $lang['users']; ?>
</a>
<?php endif; ?>
<?php if( $userOptions['show_log'] ): ?>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="action" data-action="log">
<span class="icon-file-text"></span>
<?php echo $lang['log']; ?>
</a>
<?php endif; ?>
<?php if( $config['authentication'] ): ?>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="<?php echo $config['base_url'] . $config['home_url']; ?>index.php?action=logout">
<span class="icon-exit"></span>
<?php echo $lang['log_out']; ?>
</a>
<?php endif; ?>
</div>
</div>
</div>
<div class="col-md-6 order-md-2 text-sm-left text-center">
<h2 class="logo">
<img src="<?php echo $config['logo_image']; ?>" alt="<?php echo $config['app_title']; ?>">
<!--<span class="d-inline-block ml-2"><?php echo $config['app_title']; ?></span>-->
</h2>
</div>
<div class="col-md-4 order-md-2">
<div id="wve-user-stat">
<div class="progress mt-3">
<div class="progress-bar <?php if($userOptions['files_size_percent'] >= 85): ?>bg-danger<?php else: ?>bg-success<?php endif; ?>" role="progressbar" style="width: <?php echo $userOptions['files_size_percent']; ?>%" aria-valuenow="<?php echo $userOptions['files_size_percent']; ?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-center small mb-3">
<?php echo $lang['used']; ?>:
<?php echo $userOptions['files_size_percent']; ?>%
—
<?php echo $userOptions['files_size_total']; ?>
/
<?php echo $userOptions['files_size_max']; ?>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-4">
<div class="form-group">
<button type="button" class="btn btn-lg btn-smp btn-outline-primary btn-block" data-toggle="action" data-action="import" id = "import-bttn">
<span class="icon-download"></span>
<?php echo $lang['import_media']; ?>
</button>
</div>
<div class="mb-3" style="max-height: 338px; overflow: auto;">
<ul class="list-group" id="wve-list_input">
</ul>
</div>
</div>
<div class="col-md-8">
<div class="card mb-3">
<div class="card-body">
<div class="wve-editor-player light">
<video src="" preload="auto" width="400" height="360" class="d-block" id="wve-video"></video>
<div class="wve-editor-player-panel" style="display: none;">
<div class="time" id="wve-editor-player-time"></div>
<div class="time time-current" id="wve-editor-player-time-current"></div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center vid_btns" id = "editor-controls">
<button type="button" class="btn light" data-toggle="action" data-action="stepback_main">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 16.07V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.56.4-.56 1.24 0 1.63l5.77 4.07c.67.47 1.58 0 1.58-.81zm1.66-3.25l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"></path></svg> <span class="d-md-none d-lg-inline">Step back</span>
</button>
<button type="button" class="btn light" data-toggle="action" data-action="play_main">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M9.5,14.67V9.33c0-0.79,0.88-1.27,1.54-0.84 l4.15,2.67c0.61,0.39,0.61,1.29,0,1.68l-4.15,2.67C10.38,15.94,9.5,15.46,9.5,14.67z"></path></g></svg> <span class="d-md-none d-lg-inline">Play</span>
</button>
<button type="button" class="btn light" data-toggle="action" data-action="stepforward_main">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M5.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L5.58 7.11C4.91 6.65 4 7.12 4 7.93v8.14c0 .81.91 1.28 1.58.82zM13 7.93v8.14c0 .81.91 1.28 1.58.82l5.77-4.07c.56-.4.56-1.24 0-1.63l-5.77-4.07c-.67-.47-1.58 0-1.58.81z"></path></svg> <span class="d-md-none d-lg-inline">Step forward</span>
</button>
<button class="btn light" data-toggle="action" data-action="take-episode">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1zm17-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3h-3c-.55 0-1-.45-1-1s.45-1 1-1h3V6c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z"></path></svg> <span class="d-md-none d-lg-inline">Take episode</span>
</button>
<button type="button" class="btn light" data-toggle="action" data-action="play_selected">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M10.8 15.9l4.67-3.5c.27-.2.27-.6 0-.8L10.8 8.1c-.33-.25-.8-.01-.8.4v7c0 .41.47.65.8.4zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg> <span class="d-md-none d-lg-inline">Play episode</span>
</button>
<button class="btn light" data-toggle="action" data-action="cut-fast">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9.64 7.64c.29-.62.42-1.33.34-2.09-.19-1.73-1.54-3.2-3.26-3.49-2.77-.48-5.14 1.89-4.66 4.65.3 1.72 1.76 3.07 3.49 3.26.76.08 1.46-.05 2.09-.34L10 12l-2.36 2.36c-.62-.29-1.33-.42-2.09-.34-1.73.19-3.2 1.54-3.49 3.26-.48 2.77 1.89 5.13 4.65 4.65 1.72-.3 3.07-1.76 3.26-3.49.08-.76-.05-1.46-.34-2.09L12 14l7.59 7.59c.89.89 2.41.26 2.41-1v-.01c0-.37-.15-.73-.41-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zm7.59-10.09L13 9l2 2 6.59-6.59c.26-.26.41-.62.41-1V3.4c0-1.25-1.52-1.88-2.41-.99z"></path></svg> <span class="d-md-none d-lg-inline">Cut fast</span>
</button>
<button type="button light" class="btn light rev" data-toggle="action" data-action="render">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M21.98 15.65C21.16 14.64 19.91 14 18.5 14C17.44 14 16.46 14.37 15.69 14.99C14.65 15.81 14 17.08 14 18.5C14 19.34 14.24 20.14 14.65 20.82C14.92 21.27 15.26 21.66 15.66 21.98H15.67C16.44 22.62 17.43 23 18.5 23C19.64 23 20.67 22.58 21.46 21.88C21.81 21.58 22.11 21.22 22.35 20.82C22.76 20.14 23 19.34 23 18.5C23 17.42 22.62 16.42 21.98 15.65ZM20.76 17.94L18.36 20.16C18.22 20.29 18.03 20.36 17.85 20.36C17.66 20.36 17.47 20.29 17.32 20.14L16.21 19.03C15.92 18.74 15.92 18.26 16.21 17.97C16.5 17.68 16.98 17.68 17.27 17.97L17.87 18.57L19.74 16.84C20.04 16.56 20.52 16.58 20.8 16.88C21.09 17.19 21.07 17.66 20.76 17.94Z"></path><path d="M14.7295 5.86V2.5C14.7295 2.22 14.5095 2 14.2295 2H9.76953C9.48953 2 9.26953 2.22 9.26953 2.5V5.86C9.26953 6.14 9.48953 6.36 9.76953 6.36H14.2295C14.5095 6.36 14.7295 6.14 14.7295 5.86Z"></path><path d="M7.24851 2.0207C4.68851 2.1807 2.93851 3.5007 2.28851 5.7007C2.18851 6.0307 2.42851 6.3607 2.76851 6.3607H7.26851C7.54851 6.3607 7.76851 6.1407 7.76851 5.8607V2.5207C7.76851 2.2407 7.52851 2.0007 7.24851 2.0207Z"></path><path d="M16.7505 2.00898C19.3105 2.16898 21.0605 3.48898 21.7105 5.68898C21.8105 6.01898 21.5705 6.34898 21.2305 6.34898H16.7305C16.4505 6.34898 16.2305 6.12898 16.2305 5.84898V2.50898C16.2305 2.22898 16.4705 1.98898 16.7505 2.00898Z"></path><path d="M22 8.35937V12.7394C22 13.1094 21.61 13.3494 21.28 13.1794C20.44 12.7394 19.48 12.4994 18.5 12.4994C16.89 12.4994 15.32 13.1594 14.2 14.3094C13.1 15.4294 12.5 16.9194 12.5 18.4994C12.5 19.3094 12.82 20.3494 13.22 21.2194C13.38 21.5694 13.14 21.9994 12.75 21.9994H7.81C4.6 21.9994 2 19.3994 2 16.1894V8.35937C2 8.07937 2.22 7.85938 2.5 7.85938H21.5C21.78 7.85938 22 8.07937 22 8.35937Z"></path></svg> Create Video
</button>
</div>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Timeline slider -->
<div class="navbar nav-expand fixed-bottom light">
<div class="card-body">
<div class="editor-timeline-wrapper">
<div id="wve-timeline"></div>
<div id="wve-timeline-range"></div>
<div id="wve-time-selected-inputs">
<div class="card card-body py-2 px-4 shadow-1 bg-secondary">
<div class="row">
<div class="col-5 pl-1 pr-1">
<input type="text" class="form-control form-control-sm wve-time-input-in" value="">
</div>
<div class="col-5 pl-1 pr-1">
<input type="text" class="form-control form-control-sm wve-time-input-out" value="">
</div>
<div class="col-2 pl-1 pr-1">
<button type="button" class="btn btn-outline-light btn-block text-center p-1">
<i class="icon-cross"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- /Timeline slider -->
<!--episode/clip(s) container-->
<div class="episode-container" id="wve-episode-container" style="display: none;">
<hr class="mb-0">
<div class="row wve-episode-container" id="wve-episode-container-inner"></div>
<div class="clearfix"></div>
</div>
<!-- Output list -->
<div class="card">
<div class="card-body">
<div class="bottom-list-container border rounded-0">
<table class="table table-bordered table-hover no-margin">
<colgroup>
<col width="40%">
<col width="20%">
<col width="15%">
<col width="15%">
<col width="10%">
</colgroup>
<tbody id="wve-list_output"></tbody>
</table>
</div>
</div>
</div>
<!-- /Output list -->
<script>
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('light');
document.querySelector('.navbar').classList.toggle('light');
document.querySelector('button').classList.toggle('light');
document.querySelector('#menu-btn').classList.toggle('light');
document.querySelector('.wve-editor-player').classList.toggle('light');
});
</script>
Image included of the desired result as well. Thanks for any input or proposal in advance!
IMAGE

As Canadian_Pixel explained. In addition, .querySelecyorAll() returns a NodeList which is an array-like object consisting of all elements that the selector (a string identical to a CSS selector, ex. ".navbar") matches. In order to execute a class change on each .navbar within the NodeList you'll need to iterate though it as if it is an array. At this point you can work with a NodeList and use some basic Array methods and loops, or convert the NodeList into an array (see end of this answer). In this case, the former (ie. NodeList) is good enough.
Replace this:
document.querySelectorAll('.navbar').classList.toggle('light');
with this:
document.querySelectorAll('.navbar').forEach(nav => nav.classList.toggle('light'));
The above works 100%, I already tested it on your site. If for some reason you need the whole arsenal of the Array API:
Array.from(document.querySelectorAll('.navbar'));
OR
[...document.querySelectorAll('.navbar')]

It's seems that your problem stems from you using querySelector()
Since the output will always be the first element matching the criteria (in your case it seems to be your header)
( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector )
Try using an id instead for your footer or using querySelectorAll() which will return a list of elements
(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
Hope I could help you, keep me updated if you fixed it ! :)

How do I fix my navbar to have a profile with image?

I just needed help with something, how do I make it for my nav bar to have an image in the profile image?
Image for how I would like it to look:
Image for how I would like it to look (also to make it more clear than vague).
.navbar__link {
position: static;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
margin: 20px 0;
border-radius: 10px;
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
text-align: center;
display: inline-block;
padding: 20px;
}
}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
text-decoration: none;
padding: 15px;
}
.header {
display: flex;
// make the header take all space of body
width: 100%;
}
.navbar {
display: flex;
// make navbar take all space that remains after the logo
flex: 1;
justify-content: center;
// make the navbar move left side else it will not be in complete middlle
transform: translate(-100px);
}
* {
margin: 0;
padding: 0;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.logo {
width: 48px;
height: 48px;
}
.loading-bar {
width: 130px;
height: 2px;
background: #ffffff;
margin-top: 22px;
position: relative;
overflow: hidden;
}
.loading-bar::before {
content: '';
width: 68px;
height: 2px;
background: #000000;
position: absolute;
left: -34px;
animation: blackbar 1.5s infinite ease;
}
#keyframes blackbar {
50% {
left: 96px;
}
}
<body onload="handlePageLoaded()">
<header>
<div style="float: left; padding-right: 10px;">
<img width='200' height='50' src='Icons/Seencast home.png' />
</div>
<div class="navbar" style="justify-content: center;">
<a href="discovery.html" class="navbar__link">
<span class="material-icons">whatshot</span>
</a>
<a href="profile.html" class="navbar__link">
<span class="material-icons">person_outline</span>
</a>
</div>
<!-- Loading Screen -->
<div class="loading-screen">
<div class="loading-animation">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"> <image id="image0" width="90" height="90" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
</svg>
<div class="loading-bar"></div>
</div>
</div>
</header>
<script>
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
<script>
/* Loading Script */
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
UPDATES will go under here, will be updated every 10 minutes!
ex: [UPDATE 1] EXAMPLE
real: [UPDATE 1] Nothing so far :/.
[UPDATE 2] Nothing so far :/.

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Navigation fill transition based on scroll position

I'm trying to make the "insticon" svg swap fill color black/white based on scroll position as indicated in the jQuery. I have indicated these changes in the if & else statements however "insticon" unlike "header-bg" & "header-content" is not transitioning. How do I accomplish this effect?
jQuery(document).ready(function($) {
var lastScrollTop = 0;
$(window).scrollTop(0);
$(window).on('scroll', function() {
var header = $('header');
var content = $('content');
var headerBg = $('.header-bg');
var headerCnt = $('.header-content');
var inst = $('.navinstagram');
var scrollTop = $(window).scrollTop();
var dynHeaderVisible = false;
if (lastScrollTop > scrollTop) {
if (scrollTop <= 400) {
headerBg.css("height", 0);
headerCnt.css('color', 'white');
inst.css('fill', 'white');
} else {
headerBg.css("height", 50);
headerCnt.css("height", 50);
headerCnt.css('color', 'black');
inst.css('fill', 'black');
}
} else {
// Down
if (scrollTop > 350) {
console.log("hi");
headerCnt.css("height", 0);
headerBg.css("height", 0);
}
}
lastScrollTop = scrollTop;
});
$.fn.isOnScreen = function() {
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-size: 1em;
font-family: Helvetica Neue, Helvetica,Arial,Sans-serif;
}
a {
background: transparent;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: .3s color;
transition: .3s height;
}
header {
position: fixed;
height: 50px;
width: 100%;
}
.header-wrapper {
width: 100%;
height: 100%;
background: transparent;
}
.header-bg,
.header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.header-bg {
color: gray;
background: white;
border-bottom: 1px solid black;
transition: .3s height;
height: 0;
}
.header-content {
transition: .3s color;
color: white;
background: transparent;
height: 50px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
ul {
width:100%;
}
li {
padding-top: 15px;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
margin-right:50px;
}
.navBarLinks {
color: inherit;
cursor: pointer;
font-size: .8em;
letter-spacing: 0.05em;
transition: .3s color;
padding-top: 15px;
line-height: 31px;
}
.instagram{
float:left;
padding-left:50px;
}
.hamburger {
float:right;
padding-right:50px;
}
.insticon {
float:right;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
fill: white;
font-size:.8em;
letter-spacing:0.05em;
padding: .05px 10px;
}
#media only screen and (max-width : 555px) {
.find{
display: none;
}
}
content {
height: 2000px;
background: orange;
}
.stage {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background: white;
border-bottom: 1px solid black;
font-size: 48px;
height: 200px;
width: 100%;
}
.stage-0 {
background: grey;
height: 400px;
}
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<div class="header-wrapper">
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li class="instagram">
Find me on
<a href="" class="navBarLinks in">
<svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</a>
</li>
<li class="home">Logo </li>
<li class="hamburger">Hamburger</li>
</ul>
</div>
</div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

Your problem is here:
var inst = $('.navinstagram');
There is no "navinstagram". I think you meant:
var inst = $('.insticon');