"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 ---------->
<!--===============================================
NAVBAR
===============================================-->
<div class="topnav">
<span class="brand-logo"><a href="#"> <img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"> </a></span>
<div class="topnav-right">
<span class="social">
<a href="#twitter"><i class="fa fa-twitter"></i></a>
<a href="#fb"><i class="fa fa-facebook-f"></i></a>
<a href="#insta"><i class="fa fa-linkedin"></i></a>
</span>
</div>
</div>
<!-- SIDE NAVBAR START-->
<nav>
<div class="menu-btn">
<div class="line line--1"></div>
<div class="line line--2"></div>
<div class="line line--3"></div>
</div>
<div class="nav-links">
<a href="" class="link">Home</a>
<a href="" class="link">Contact</a>
<a href="" class="link">Profile</a>
<a href="" class="link">About</a>
</div>
</nav>
<!-- ==========================================
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');
}
@font-face {
font-family: 'googleapis';
src: url(https://fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C600%2C700%2C900) format('truetype');
}
.main_warp {
padding-top: 50px;
padding-bottom: 50px;
}
body {
margin: 0;
font-family: 'TitilliumWeb';
}
::-moz-selection {
color: #fff;
background: #b50201;
}
::selection {
color: #fff;
background: #b50201;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .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');
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

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

Questions / Comments: