Bootstrap Snippet sLIDER 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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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 ---------->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/line-awesome.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    
    
<!--=====================TOP NAV=====================-->
    <section>
<div class="top_bar">
<div class="container">
<div class="col-md-6">
<ul class="social">
<li><a href=""><i class="fa fa-facebook text-white"></i></a></li>
<li><a href=""><i class="fa fa-twitter text-white"></i></a></li>
<li><a href=""><i class="fa fa-instagram text-white"></i></a></li>
</ul></div>
<div class="col-md-6">
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 {    
    line-height: 1.42857143;
    color: #333;
    background-color: #f3f3f3;
}
.top_bar { min-height:40px; /* 
background: #30bed6; /* Old browsers */
background: -moz-linear-gradient(left, #30bed6 0%, #38cac9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #30bed6 0%,#38cac9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #30bed6 0%,#38cac9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30bed6', endColorstr='#38cac9',GradientType=1 ); /* IE6-9 */}
.social { list-style-type:none; margin-bottom:0px; float:left; padding:0px; margin-left:0px;}
.social li { float:left;}
.social li a { padding:0 10px; font-size:13px; line-height:40px; color:#FFF;}
.rightc { list-style-type:none; margin-bottom:0px; float:right;}
.rightc li { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;}
.rightc li a {   color:#FFF; }
/*///////////////////////////////NAVBAR///////////////////////////////*/
.nav {
    position: relative;
    padding: 10px 0px;
    padding-bottom: 15px;
    background-color: #fff;
/*    border-bottom: solid 2px #E1EFFC;*/
}
.brand-logo{
    display: inline-block;
    float:left;
    margin-top: 12px;
}
.nav-warp ul{
    margin:0px;
    padding:0px;
    float:right;
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
//NAVBAR RESPONSIVE======================================
$(document).ready(function() {
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#hit-nav-wrapper').addClass('stick');
    } else {
       $('#hit-nav-wrapper').removeClass('stick');
    }
});
});
//NAV ICON & SLIDE NAV==================================
$(document).ready(function() {
    $('#nav-icon').click(function() {
        $(this).toggleClass('open');
        if ($('.nav-warp').hasClass('navi')) {
            $('.nav-warp').animate({
                right: '0px'
            }, 500).removeClass('navi');
        } else {
            $('.nav-warp').animate({
                right: -270
            }, 500).addClass('navi');
        }
    });
});
//Categories NAV==================================
$(document).ready(function() {
    $('#cate').click(function() {
    $('#sidebar-menu').toggleClass('sidebar-shwo')
        
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"sLIDER"
Bootstrap 3.1.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"sLIDER" Bootstrap 3.1.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"sLIDER"
Bootstrap 3.1.0 Snippet by sumi9xm