<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="banner">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="#">DJRedNight<span>MC</span></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<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>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="conatiner">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ab accusantium praesentium, facilis dolorum sapiente magni eligendi reprehenderit consectetur necessitatibus pariatur placeat, optio, iste architecto quibusdam qui. Iure, cum, fugit?</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ab accusantium praesentium, facilis dolorum sapiente magni eligendi reprehenderit consectetur necessitatibus pariatur placeat, optio, iste architecto quibusdam qui. Iure, cum, fugit?</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ab accusantium praesentium, facilis dolorum sapiente magni eligendi reprehenderit consectetur necessitatibus pariatur placeat, optio, iste architecto quibusdam qui. Iure, cum, fugit?</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ab accusantium praesentium, facilis dolorum sapiente magni eligendi reprehenderit consectetur necessitatibus pariatur placeat, optio, iste architecto quibusdam qui. Iure, cum, fugit?</p>
</div>
/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Gothic+A1|Kaushan+Script|Libre+Baskerville|Lobster');
/* GLOBAL */
body {
background-color: black;
color: white;
}
#conatiner {
padding-top: 100px;
}
/* Navigation Bar */
nav {
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
border: none;
}
.navbar-brand span {
color: rgb(91, 141, 89);
font-size: 25px;
font-weight: 700;
letter-spacing: 0.1em;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
}
.navbar-brand {
color: #fff;
font-size: 25px;
font-family: 'Kaushan Script', 'Helvetica Neue' ,Helvetica, Arial, cursive;
font-weight: 700;
letter-spacing: 0.1em;
}
.navbar-nav .nav-item .nav-link {
padding: 1.1em 1em !important;
font-size: 120%;
font-weight: 500;
letter-spacing: 1px;
color: #fff;
font-family: 'Gothic A1', sans-serif;
}
.navbar-nav .nav-item .nav-link:hover {
color: #fed136;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
border-top: 3px solid #fed136;
}
.dropdown-item:hover {
background-color: #fed136;
color: #fff;
}
/* Add/Remove Class Javascript */
.shrink {
padding-top: 0;
padding-bottom: 0;
background-color: rgb(41, 68, 40);
}
/* mobile view */
@media (max-width:500px) {
.navbar-nav {
background-color: #000;
border-top: 3px solid #fed136;
color: #fff;
z-index: 1;
margin-top: 5px;
}
.navbar-nav .nav-item .nav-link {
padding: 0.7em 1em !important;
font-size: 100%;
font-weight: 500;
}
} /* End max-width: 500px;
// Navigation Bar Javascript
$(document).on("scroll", function() {
if($(document).scrollTop() > 10) {
$("#banner").addClass("shrink");
} else {
$("#banner").removeClass("shrink");
}
});
