"Double top"
Bootstrap 4.0.0 Snippet by sumi9xm

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.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>
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

Related: See More

Vue Paper Dashboard PRO

Questions / Comments: