Bootstrap Snippet Sticky nav 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <header style="background-image: url('assets/img/header.jpg');">
      <div class="overlay"></div>
      <!-- navigation -->
      <nav class="navbar navbar-default">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="assets/img/logo.jpg"></a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">home</a></li>
              <li><a href="#">about</a></li>
              <li><a href="#">services</a></li>
              <li><a href="#">support</a></li>
              <li><a href="#">plans&pricing</a></li>
              <li><a href="#">disclaimer</a></li>
              <li><a href="#">policy</a></li>
              <li><a href="#">contact</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav><!-- /navigation -->
    </header>
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
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
}
h1 {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
header {
  position: relative;
  background-size: cover;
  background-color: #7d6060;
  background-position: center;
  padding-top: 300px;
  padding-bottom: 300px;
}
.overlay {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.navbar {
  position: absolute;
  width: 100%;
  top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
  background-color: transparent;
  border: transparent;
  -webkit-transition: all ease-in-out 0.4s;
  -moz-transition: all ease-in-out 0.4s;
  -o-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$(window).scroll(function(){
        var wscroll = $(this).scrollTop();
        if(wscroll > 50){
         $(".navbar").addClass("shrink-nav");
        }
        else{
          $(".navbar").removeClass("shrink-nav");
        }
      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sticky nav"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Sticky nav" Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Sticky nav"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY