Bootstrap Snippet IMKlik 2017 navbar 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--
********************************************************************
* Responsive Transparent Navbar
********************************************************************
-->
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container pull-left">
    <div class="navbar-header">
      
<img src="http://via.placeholder.com/100x50">
     
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services and Pricing</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul>
    </div>
    
 
<img src="http://www.imklik.com/img/2017/common/filmstrip-top.png">
    
  </div>
</div>
  <img src="http://www.imklik.com/img/2017/common/Mainpage-placeholder.jpg">
<section class="banner">
<div class="container">
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
section
{
  background:yellow;
}
.banner
{
  background:red;
  min-height:200px;
}
.banner .row
{
  text-align:center;
  margin-top:50px;
}
.banner h1
{
  color:white;
}
/***********************************************************************
*  OPAQUE NAVBAR SECTION
***********************************************************************/
.opaque-navbar {
    background-color: rgba(112,42,104,45);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
}
ul.dropdown-menu {
    background-color: black;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 /*
  **********************************************************
  * OPAQUE NAVBAR SCRIPT
  **********************************************************
  */
  // Toggle tranparent navbar when the user scrolls the page
  $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"IMKlik 2017 navbar"
Bootstrap 3.0.0 Snippet by andrewbsc

Related: See More

Questions / Comments:

"IMKlik 2017 navbar" Bootstrap 3.0.0 Snippet by andrewbsc

Related: See More

Questions / Comments:

"IMKlik 2017 navbar"
Bootstrap 3.0.0 Snippet by andrewbsc