Как только я нажимаю кнопку бургера, чтобы закрыть / свернуть раскрывающийся список, передача содержимого работает таким образом, что оно исчезает после того, как это делает фон. Также кажется, что при коллапсе перехода фона нет. Как мне исправить это так, чтобы переход текста и фона удалял их go одновременно?
/* main.css */
body{
background-color: black;
}
.navbar-toggler{
border : 0 solid white;
}
header{
height: 112px;
}
.jumbotron {
margin-bottom: 1rem;
background-color: #2C7368;
padding-top: 1.5%;
padding-bottom: 0.00025%;
margin-top: 3rem;
}
.jumbotron h2{
color: #E3D7EE;
font-size: 2.125rem;
padding-left: 4%;
}
#first{
padding-bottom: 0.5%;
}
.approve {
margin: 0 auto;
text-align: right;
padding-right: 4%;
font-size: 1.25rem;
}
#nav{
display : block;
}
.container.cont{
margin-top: 5rem;
}
.navbar.scrolled {
background: rgb(222,192,222);
transition: background 500ms;
}
.navbar.scrolled-button {
background: rgb(222,192,222);
transition: background 2s;
}
#mainNavbar {
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link {
color: white;
padding-right: 1rem;
}
button.navbar-toggler.collapsed{
color:green;
}
.navbar-toggler .icon-bar {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XYZ</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<header>
<div class="jumbotron jumbotron-fluid">
<h2 id="first">ABC</h2>
<h2>DEF</h2>
<p class = "approve"><strong>FOOTER GOES HERE</strong><p>
</div>
</header>
<div id = "nav">
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
<div class = "container">
<a href="#" class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">ABOUT US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PRODUCTS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<span class = "dropdown-header"><strong>Bearings</strong></span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a href="" class="nav-link">PROJECTS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
<script>
$(".navbar-toggler").click(function(){
$("nav").toggleClass("scrolled-button");
});
</script>
</body>
</html>