"Video Banner Side navbar"
Bootstrap 4.1.1 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.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 ---------->
<div class="main-wrap">
<nav class="">
<div class="nav-links">
<a href="" class="link">Home</a>
<a href="" class="link">FIND WORK </a>
<a href="" class="link">FIND TALENT</a>
<a href="" class="link">SERVICES</a>
<a href="" class="link">Contact</a>
<a href="" class="link">LEADERSHIP</a>
<a href="" class="link">ABOUT US </a>
</div>
</nav>
<div class="content-main">
<header class="header" id="head">
<div class="brand-logo"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"> </div>
<div class="menu-btn">
<div class="line line--1"></div>
<div class="line line--2"></div>
<div class="line line--3"></div>
</div>
</header>
<div class="content">
<div class="site-banner__vid">
<!--
<video muted="" autoplay="" loop="" preload="" playsinline="" data-video="0">
<source src="http://www.saxonglobal.com/wp-content/themes/saxonglobal/video/saxonglobal.mp4">
<source src="https://ic-creative.co.uk/wp-content/themes/ic-creative/assets/vid/banner.ogg" type="video/ogg">
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{
background-color:#000;
font-family: 'TitilliumWeb';
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #b50201;
display:none;
}
/*MAIN SECTION===============================================*/
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
$(document).ready(function(){
var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('header .menu-btn .line--1');
var lineTwo = document.querySelector('header .menu-btn .line--2');
var lineThree = document.querySelector('header .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
nav.classList.toggle('nav-open');
lineOne.classList.toggle('line-cross');
lineTwo.classList.toggle('line-fade-out');
lineThree.classList.toggle('line-cross');
link.classList.toggle('fade-in');
})
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("body").addClass("animation");
} else {
$("body").removeClass("animation");
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: