Bootstrap Snippet Sample home page with toggle navigation using HTML CSS Bootstrap jQuery

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 ---------->
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Homepage">
    <meta name="author" content="Ramanand">
  <title>Sample Homepage</title>
  
    <link rel="shortcut icon" href="favicon.png">
    
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Fontawesome CDN -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
    
    <link rel="stylesheet" href="css/styles.css">
    <!-- inline-->
    <style>
    </style>
  
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>
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{
    width:100%;
    height:100%;
    overflow-x: hidden;
}
/*Navbar Css*/
.container.navbar-desktop-only {
    position:relative;
    overflow-x: hidden;
}
.navbar-fixed-top.shrink {
    color: #000;
    background-color: rgba(255,255,255,0.8);
}
.navbar-fixed-top.shrink .cust-navbar{
    background-color: rgba(255,255,255,0);
}
.navbar-default .navbar-nav>li>a {
    color: #000;
}
/*
.logo-container img {
    width: 30%;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}
.logo-container img.shrink{
    width:10%;
}
*/
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
(function($) {
  $(document).ready(function(){
    $('.toggle-nav').on('click', function() {
      toggleNavigation($(this), $('.nav-pane'));
      changeLetters($(this));
    });
      
    function toggleNavigation(btn, nav) {
      btn.toggleClass('open');
      nav.toggleClass('open');
    }
    function changeLetters(btn) {
      var e = $('.toggle-nav span.e');
      e.toggleClass('btn-close');
    }
      
     $('.carousel').carousel({
      interval: 6000
    });
  });
})(jQuery);
function openNav() {
    document.getElementById("mySidenav").style.width = "340px";
}
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
new WOW().init();
$(window).scroll(function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sample home page with toggle navigation"
Bootstrap 3.0.0 Snippet by nandpusalkar

Related: See More

Questions / Comments:

"Sample home page with toggle navigation" Bootstrap 3.0.0 Snippet by nandpusalkar

Related: See More

Questions / Comments:

"Sample home page with toggle navigation"
Bootstrap 3.0.0 Snippet by nandpusalkar