Develop Reference

Why is my content not displaying after the page gets loaded?

hello i have created a loading screen for my home page, but the content doesn't display after the site has loaded. I set the console log to send message once it has loaded and I don't get any errors. Does anyone know why this is happening? Also, how can I get the loading text to fade every time it changes as well?
function timeout(ms) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
function loadingScreen() {
var loadingText = document.getElementById('loading-text');
loadingText.innerText = "Welcome To StudioPick."
var delay = 7000;
return timeout(delay)
.then(() => { loadingText.innerText = "Loading studios..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Almost done..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Let's get started"; return timeout(delay) })
.then(() => { loadingText.parentElement.style.display = "none" })
}
document.addEventListener('DOMContentLoaded', () => {
console.log("content has loaded.")
loadingScreen();
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
background-color: #d1d1d1 !important;
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#loading-text {
position: relative;
top: 33rem;
text-align: center;
z-index: 100 !important;
color: #ffffff;
font-size: 20px;
}
#loading {
font-size: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background: #9370db url(/dist/512x512\ Half\ Circle.gif);
background-size: 2%;
background-repeat: no-repeat;
background-position: center;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370db !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url("https://source.unsplash.com/XT5OInaElMw/1600x900") black
no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
position: relative;
top: -130px;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.enter-site {
background-color: transparent;
color: #ffffff;
padding: 0;
border-color: #ffffff;
width: 120px;
height: 45px;
border-radius: 15px !important;
align-items: center;
justify-content: center;
position: relative;
right: -580px;
top: 50px;
z-index: 25;
}
#footer {
position: relative;
right: -15px;
top: 225px;
z-index: 20;
font-size: 12px;
}
/*---Header---*/
.sturow > * {
flex: 1;
}
/*---Studio List---*/
.stucontainer {
width: 100%;
height: 900px;
padding: 50px 80px;
}
/*---Card One---*/
/*---Star Rating 1---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
right: -55px;
color: #9370db;
}
.stuLocation {
position: relative;
top: -10px;
right: -55px;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: -50px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -30px;
left: -105px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -7px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #c01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover > .buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover > .buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>StudioPick</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="loading">
<div id="loading-text"></div>
</div>
<div id="page">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand"
href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;"
href="index.html"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html"><strong>Log In</strong></a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html"><strong>Sign Up</strong></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<!-- The header content -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next
Studio</strong></h1>
<div class="row">
<!---Search--->
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<!---Zipcode-->
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<!---Sort----->
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<!---Filter--->
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
<button class="enter-site" onclick="window.location.href='Index.html'"></a><strong>View
Studios</strong></button>
<footer class="mt-auto text-white-50" id="footer">
<p>#Bekaedo <br>StudioPick 2022 ©</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<!--Studio List-->
<div class="row">
<!--Studio One-->
<div class="stuOne mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col"
style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" id="stuImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image"
style="max-width:50px; position: relative; top: 50px; left: -150px;">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1"
class="btn"><i class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%"
y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5"
fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
<!--Studio Front Page-->
</div>
</div>
</div>
<!--Studio One-->
<!--Studio Two-->
<!--Studio Two-->
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

You are setting display: none to .loading-text, it needs to be set on its parent (#loading).
As for fading, innerText.fadeOut does nothing. I would suggest doing this with css by toggling appropriate classes with js.

card not scrolling through stack properly

I have a set of stacked cards displayed on my home page. When I click the buttons to scroll through them they pop up on the header and mess up the whole page's styling.
Also, how can I remove the white box from behind my cards as well?
Screenshot:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function() {
var prependList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function() {
prependList();
}, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}
}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function() {
appendToList();
}, 150);
});
body {
background-color: #E5E5E5 !important;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370DB !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.col-md-5 {
margin: auto;
}
.card-title {
text-align: center;
font-weight: 800;
font-size: 22px;
}
.card-text {
text-align: center;
font-weight: 800;
margin-top: -75px;
}
::-webkit-input-placeholder {
font-weight: bold;
}
:-moz-placeholder {
font-weight: bold;
}
:-ms-input-placeholder {
font-weight: bold;
}
/*---Star Rating---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
left: -65px;
color: #9370DB;
}
.card1 .roomB {
position: relative;
left: 5px;
color: #ffffff;
}
.card1 .roomC {
position: relative;
left: 5px;
color: #ffffff;
}
.stuLocation {
position: relative;
top: -10px;
left: -65px;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: -50px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -30px;
left: -60px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -7px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover>.buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover>.buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next Studio</strong></h1>
<div class="row">
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<div class="row">
<div class="stuList mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<a class="buttons prev" href="#">
</a>
<ul class="card-list">
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://images.adsttc.com/media/images/5d1b/e492/284d/d1b1/8300/00a1/large_jpg/feature_-_FFX_SDC_01.jpg?1562109025');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomC mb-2"><strong>Room C</strong></h6>
</div>
</div>
</div>
</div>
</li>
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://www.unifiedmanufacturing.com/blog/wp-content/uploads/2021/02/Nightbird-Recording-Studios-Pandemic.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomB mb-2"><strong>Room B</strong></h6>
</div>
</div>
</div>
</div>
</li>
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i class="fas fa-heart"></i></Button>
</div>
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
</div>
</div>
</li>
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
</div>
</div>
</div>
</section>

To remove the background color try removing background-color: #fff; from .stucontainer class
.stucontainer {
width: 100%;
height: 900px;
// background-color: #fff;
padding: 50px 80px;
}
and to prevent scrolling to the top you can swap the anchor elements with button elements
<!-- <a class="buttons prev" href="#"><</a> -->
<button class="buttons prev"><</button>
...
<!-- <a class="buttons next" href="#">></a> -->
<button class="buttons next">></button>
to stop the cards from getting added at the top swap this line
// $('ul').prepend($slicedCard);
$('.card-list').prepend($slicedCard);
this will stop the card from being added to the navbar ul element

Getting Cards to fit in body properly

I have a page where a video is playing in the hero inside of the header with the navbar. I want to scroll down to my row of cards, but when I brought my code over from another page the styling got messed up. how can I make my cards display properly under this header without messing up the styling of the header and body? I have provided a screenshot and my code. Thanks!:
The card that I want to display under my header:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function() {
var prependList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function() {
prependList();
}, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if ($('.card1').hasClass('activeNow')) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}
}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function() {
appendToList();
}, 150);
});
body {
background-color: #E5E5E5 !important;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370DB !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.col-md-5 {
margin: auto;
}
.card-title {
text-align: center;
font-weight: 800;
font-size: 22px;
}
.card-text {
text-align: center;
font-weight: 800;
margin-top: -75px;
}
::-webkit-input-placeholder {
font-weight: bold;
}
:-moz-placeholder {
font-weight: bold;
}
:-ms-input-placeholder {
font-weight: bold;
}
/*---Star Rating---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: 410px;
}
.btns2 {
position: relative;
top: -50px;
left: 410px;
}
.btns3 {
position: relative;
top: -50px;
left: 410px;
}
.btns4 {
position: relative;
top: -50px;
left: 410px;
}
.btns5 {
position: relative;
top: -50px;
left: 410px;
}
.btns6 {
position: relative;
top: -50px;
left: 410px;
}
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
left: -65px;
color: #9370DB;
}
.card1 .roomB {
position: relative;
left: 5px;
color: #ffffff;
}
.card1 .roomC {
position: relative;
left: 5px;
color: #ffffff;
}
.stuLocation {
position: relative;
top: -10px;
left: -65px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -75px;
left: -25px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -6px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover~label .star,
svg.star:hover,
input[name="star"]:focus~label .star,
input[name="star"]:checked~label .star {
color: #fbff28;
}
input[name="star"]:checked+label .star {
animation: starred 0.5s;
}
input[name="star"]:checked+label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover>.buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover>.buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>StudioPick</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<!-- The header content -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next Studio</strong></h1>
<div class="row">
<!---Search--->
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<!---Zipcode-->
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<!---Sort----->
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<!---Filter--->
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<div class="row">
<div class="stuList mx-auto">
<!--Studio List-->
<div class="stucontainer">
<div class="card1-stack">
<!---Button for scroll-->
<a class="buttons prev" href="#">
</a>
<!---Button for scroll-->
<ul class="card-list">
<!--Studio Room 2-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://images.adsttc.com/media/images/5d1b/e492/284d/d1b1/8300/00a1/large_jpg/feature_-_FFX_SDC_01.jpg?1562109025');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomC mb-2"><strong>Room C</strong></h6>
</div>
</div>
</div>
</div>
</li>
<!--Studio Room 2-->
<!--Studio Room 1-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://www.unifiedmanufacturing.com/blog/wp-content/uploads/2021/02/Nightbird-Recording-Studios-Pandemic.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<div class="media-body">
<h6 class="roomB mb-2"><strong>Room B</strong></h6>
</div>
</div>
</div>
</div>
</li>
<!--Studio Room 1-->
<!--Studio Front Page-->
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU" alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i
class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
</li>
<!--Studio Front Page-->
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
<!--Studio One-->
</div>
</div>
</div>
</section>
<script src="./cardstack.js"></script>
</body>
</html>

Hide submenu when different submenu is opened

I have created this menu.
I want that you can only open one submenu at the time. So if you open the menu for club first and then the menu for profile, the club menu should automatically close. How can this be achieved?
Additionally: It would also be great if all submenus close when closing the hamburger in the top right corner. so that if you reopen the hamburger, the menus are all hidden if that makes any sense...
https://codepen.io/bvonr/pen/oNwOjgp
(function () {
var change = document.querySelector(".burger-container"),
box = document.querySelector(".mobilenavigation"),
hider = document.querySelector(".bodyandfooter");
change.onclick = function () {
change.classList.toggle("menu-opened");
box.classList.toggle("menu-opened");
hider.classList.toggle("menu-opened");
};
})();
$(".secondLayer > .plus-button > ul").parent().parent().addClass("hasChildren");
$(".secondLayer").click(function () {
$(this).find(".plus-button").toggleClass("open");
$(this).find(".plus-button").parent().parent().toggleClass("expand");
});
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
.header {
width: 100%;
max-width: 100%;
background-color: brown;
display: flex;
position: fixed;
top: 0;
height: 50px;
}
.mobilenavigation {
position: absolute;
overflow: hidden;
height: 0px;
margin-top: 50px;
width: 100%;
font-size: 20px;
line-height: 40px;
}
.burger-container {
position: relative;
display: inline-block;
margin-left: auto;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.burger-container.menu-opened {
transform: rotate(90deg);
}
.burger-container.menu-opened #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.burger-container.menu-opened #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.burger-container.menu-opened #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.mobilenavigation.menu-opened {
display: block;
position: absolute;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: calc(100vh - 80px);
width: 100%;
overflow: scroll;
}
.plus-button {
height: 40px;
width: 40px;
transition: 0.3s;
cursor: pointer;
float: right;
}
.plus-icon {
display: inline-block;
width: 20px;
height: 3px;
background-color: #24603c;
border-radius: 0.75em;
transition: 0.3s;
position: relative;
left: 10px;
top: -4px;
}
.plus-icon:before {
width: 20px;
height: 3px;
border-radius: 0.75em;
transition: 0.3s;
position: absolute;
content: "";
transform-origin: 10px center;
transform: rotate3d(0, 0, 1, 90deg);
background-color: #24603c;
}
.open.plus-button .plus-icon:before {
transform: rotate3d(0, 0, 0, 90deg);
}
.hasChildren .plus-button {
display: block;
}
.menulist {
display: none;
}
.secondLayer {
float: right;
}
.expand > .menulist {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="mobilenavigation menu-opened">
<div class="navbar">
<ul class="menuliste">
<li class="menuli1">
CLUB
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">Download</a>
</li>
<li class="menulevel1">
<a class=" " href="#">CLUB-KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="#">RAUMBELEGUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="#">FORUM</a>
</li>
</ul>
</li>
<li class="menuli1">
profile
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Freigaben</a>
</li>
<li class="menulevel1">
<a class=" " href="#">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">GRUPPENLEITER</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="burger-container menu-opened">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
</div>

Just remove all expand and open before toggling if they are not belonging to this accordion
$(".secondLayer").click(function () {
const $thisPlus = $(this).find(".plus-button")
const $thisLiContainer = $(this).find(".plus-button").closest("li");
$(".open").not($thisPlus).removeClass("open");
$(".expand").not($thisLiContainer).removeClass("expand");
$thisPlus.toggleClass("open");
$thisLiContainer.toggleClass("expand");
});
(function () {
var change = document.querySelector(".burger-container"),
box = document.querySelector(".mobilenavigation"),
hider = document.querySelector(".bodyandfooter");
change.onclick = function () {
change.classList.toggle("menu-opened");
box.classList.toggle("menu-opened");
hider.classList.toggle("menu-opened");
};
})();
$(".secondLayer > .plus-button > ul").closest("li").addClass("hasChildren");
$(".secondLayer").click(function () {
const $thisPlus = $(this).find(".plus-button")
const $thisLiContainer = $(this).find(".plus-button").closest("li");
$(".open").not($thisPlus).removeClass("open");
$(".expand").not($thisLiContainer).removeClass("expand");
$thisPlus.toggleClass("open");
$thisLiContainer.toggleClass("expand");
});
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
.header {
width: 100%;
max-width: 100%;
background-color: brown;
display: flex;
position: fixed;
top: 0;
height: 50px;
}
.mobilenavigation {
position: absolute;
overflow: hidden;
height: 0px;
margin-top: 50px;
width: 100%;
font-size: 20px;
line-height: 40px;
}
.burger-container {
position: relative;
display: inline-block;
margin-left: auto;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.burger-container.menu-opened {
transform: rotate(90deg);
}
.burger-container.menu-opened #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.burger-container.menu-opened #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.burger-container.menu-opened #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.mobilenavigation.menu-opened {
display: block;
position: absolute;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: calc(100vh - 80px);
width: 100%;
overflow: scroll;
}
.plus-button {
height: 40px;
width: 40px;
transition: 0.3s;
cursor: pointer;
float: right;
}
.plus-icon {
display: inline-block;
width: 20px;
height: 3px;
background-color: #24603c;
border-radius: 0.75em;
transition: 0.3s;
position: relative;
left: 10px;
top: -4px;
}
.plus-icon:before {
width: 20px;
height: 3px;
border-radius: 0.75em;
transition: 0.3s;
position: absolute;
content: "";
transform-origin: 10px center;
transform: rotate3d(0, 0, 1, 90deg);
background-color: #24603c;
}
.open.plus-button .plus-icon:before {
transform: rotate3d(0, 0, 0, 90deg);
}
.hasChildren .plus-button {
display: block;
}
.menulist {
display: none;
}
.secondLayer {
float: right;
}
.expand > .menulist {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="mobilenavigation menu-opened">
<div class="navbar">
<ul class="menuliste">
<li class="menuli1">
CLUB
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">Download</a>
</li>
<li class="menulevel1">
<a class=" " href="#">CLUB-KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="#">RAUMBELEGUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="#">FORUM</a>
</li>
</ul>
</li>
<li class="menuli1">
profile
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Freigaben</a>
</li>
<li class="menulevel1">
<a class=" " href="#">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">GRUPPENLEITER</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="burger-container menu-opened">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
</div>

Problem to overlay content when hamburger icon is pressed on mobile

I want my navbar to cover the whole screen when the hamburger menu is pressed on smaller screens.
I added the .pushclass (see the jquery and css) to fire when the .navbar-toggle-icon is pushed.
for some reason I can't find out why it is not working and in addition to that problem, the Jquery that makes the navbar sticky on scroll is not working after I added the function to fire the .push class.
So as my code stands now it is not giving me the full screen navbar on mobile and the navbar is no longer sticky on scroll.
i've spent most of the day trying to find a fix for this but with out any luck.
Can someone please held me here?
here is a fiddle to the code
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
$('.navbar-toggler-icon').on('click', function(e) {
if (!$('html').hasClass('push')) {
$('html').addClass('push');
} else {
$('html').removeClass('push');
};
e.preventDefault();
console.log('its alive');
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push .navbar-toggler-icon span::before .push #nav-wrapper {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>

If I understand your question correctly you want the .nav-bar to fill the view port height when you are on smaller devices. If that's what you want then all you need is to add this to your css.
.navbar-nav{
min-height: 100vh;
}
then you don't need the .push class and the Jquery function for the .push class. It is just complicating things.
I don't follow what you are saying about the .sticky it seems to be ok. But perhaps you want to post another question regarding that issue.
Here is a working snippet for you with the added .navbar-nav class.
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.navbar-nav{
min-height: 100vh;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push #navbarDropdown {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>