Bootstrap Snippet Bootstrap Faded Navigation Bar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 /* 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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
// Navigation Bar Javascript
$(document).on("scroll", function() {
    
    if($(document).scrollTop() > 10) {
        $("#banner").addClass("shrink");
    } else {
        $("#banner").removeClass("shrink");
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Faded Navigation Bar"
Bootstrap 4.1.1 Snippet by DJRedNightMC

Related: See More

Questions / Comments:

"Bootstrap Faded Navigation Bar" Bootstrap 4.1.1 Snippet by DJRedNightMC

Related: See More

Questions / Comments:

"Bootstrap Faded Navigation Bar"
Bootstrap 4.1.1 Snippet by DJRedNightMC