Bootstrap Snippet Demo 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="//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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="img/ico" href='images/favicon.png'>
    <title>Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
    
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>    
    <script src="js/hitgoalz.js"></script>
</head>
<body>
    
    
    <!--===============================================
                      NAVBAR
===============================================-->
<saction id="nav-wrapper" class="">
    <div class="container position-rlt">
        <nav class="navbar navbar-expand-sm navbar-dark">
      <div class="hamburger">
            <div class="cta">
                <div class="toggle-btn type14"></div>
            </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
@font-face {
    font-family: 'TitilliumWeb';
    src: url(../font-style/TitilliumWeb-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Comfortaa';
    src: url(../font-style/Comfortaa-Regular.ttf) format('truetype');
}
body{    
    font-family: 'Comfortaa';   
}
/*===========================SUPPORT CLASS===========================*/
.trans{
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
.position-rlt{
    position: relative;
}
.side-nav-warp{
    padding-top:80px;
}
/*//////////////////////////////////////////////////// 
                   5.Navbar
////////////////////////////////////////////////////*/
 #nav-wrapper{
     background-color: transparent;
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
$(document).ready(function () {
    $(document).on('click', '.cta', function () {
        $(this).toggleClass('active')
    })
});
$(document).ready(function(){
    $(".hamburger").click(function(){
        $('.sidebar-menu').removeClass("flowHide");  
        $(".sidebar-menu").toggleClass("full-side-bar");
        $('.nav-link-name').toggleClass('name-hide');        
    });
});
//NAVBAR RESPONSIVE======================================
$(document).ready(function() {
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#nav-wrapper').addClass('stick');
    } else {
       $('#nav-wrapper').removeClass('stick');
    }
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Demo"
Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Demo" Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Demo"
Bootstrap 4.1.1 Snippet by sumi9xm