"Video Banner Side navbar"
Bootstrap 4.1.1 Snippet by vivekbisht109

<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="//code.jquery.com/jquery-1.11.1.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"> <source src="https://ic-creative.co.uk/wp-content/themes/ic-creative/assets/vid/banner.webm" type="video/webm"> </video> --> <div class="overlay-bg"></div> <div class="header-title"> <h1>Creating Better Lives For Everyone,<br> We Touch</h1> </div> <video muted="" autoplay="" loop="" preload="" playsinline="" data-video="0"> <source src="https://www.peopleplace.eu/wp-content/themes/peopleplace/images/intro-video-peopleplace.mp4" type="video/mp4"> </video> </div> </div> <footer class="footer"> <div class="footer__leftside"> <span class="open-social"><i class="fa fa-share-alt"></i>Follow us</span> </div> <div class="footer__rightside"> <a class="search-link" href="">Search <i class="fa fa-search"></i></a> </div> </footer> </div> </div> <saction class="home-wrap"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="f2"> <div class="inside"> <span></span> <h3>Find Your <span class="blue-text">Dream Jobs</span></h3> <h4> Your Job Search Ends Here! </h4> </div> </div> </div> <div class="col-md-6"> <div id="f3"> <div class="inside"> <span></span> <h3>Find The <span class="blue-text">Right Talent</span></h3> <h4> Your Talent Search Ends Here! </h4> </div> </div> </div> </div> </div> </saction> <br>
@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===============================================*/ .main-wrap{ position: relative; width:100%; height:auto; } body.animation .main-wrap { position: fixed; } body.animation .home-wrap { padding-top: 550px; display: block; } body.animation .content-main { -webkit-transform: rotateX(0deg) scale(0.8); transform: rotateX(0deg) scale(0.8); pointer-events: none; overflow: hidden; } .content-main{ webkit-transform: scale(1); transform: scale(1); opacity: 1; } .content-main { position: relative; left: 0px; top: 0px; z-index: 999; height: 100%; -webkit-transition: -webkit-transform 650ms; transition: -webkit-transform 650ms; transition: transform 650ms; transition: transform 650ms, -webkit-transform 650ms; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .content{ height: 100vh; overflow: hidden !important; -webkit-transition: .6s; transition: .6s; } .header-title { color: #fff; position: absolute; margin: 0 auto; top: 38%; text-align: center; left: 0px; right: 0px; } .header-title h1 { font-size: 45px; line-height: 81px; font-weight: bold; font-family: 'Comfortaa'; } .overlay-bg { position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 100%; z-index: 1 !important; transition: all 1s; transform: translate(0, -35%); opacity: 1; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#03000000', GradientType=0); } .site-banner__vid video { width: 100%; height: 100%; display: block; margin-left: auto; object-fit: cover; /* position: absolute; */ left: 0; top: 0; margin: 0 auto; } /*HEADER**************************/ .header{ padding:35px; } .header { display: block; position: fixed; width: 100%; z-index: 400; top: 0; } /*Menu Button*********************/ .menu-btn{ width: 35px; text-transform: uppercase; font-size: .8em; display: block; position: absolute; max-width: 70px; top: 3.5em; right: 2.5em; height: 15px; cursor: pointer; -webkit-transition: all .3s; transition: all .3s; z-index: 2; } .menu-btn:before { content: 'menu'; position: absolute; left: 0; bottom: 0; top: 0; margin: auto; transform: translate(-80%, -1px); font-size: 18px; letter-spacing: 1px; opacity: 0; transition: all .6s; color: #fff; } .menu-btn:before { opacity: 1; transform: translate(-130%, -1px); } .menu-btn .line { padding: 0; width: 30px; background: #fff; height: 2px; margin: 5px 0; transition: all 700ms cubic-bezier(.9, 0, .33, 1); } .menu-btn .line.line--1 { width: 30px; transform: rotate(0) translateY(0); } .menu-btn .line.line--1.line-cross { width: 30px; transform: rotate(45deg) translateY(10px); background:#1b73bc; } .menu-btn .line.line--2 { width: 28px; transform: translateX(0); } .menu-btn .line.line--2.line-fade-out { width: 28px; transform: translate(30px); opacity: 0; } .menu-btn .line.line--3 { width: 20px; transform: rotate(0) translateY(0); } .menu-btn .line.line--3.line-cross { width: 30px; transform: rotate(-45deg) translateY(-10px); background: #1b73bc; } /*SIDE NAVBAR=================================*/ nav { overflow: hidden; position: fixed; transform: translateX(-280px); height: 100%; width: 270px; transition: all 800ms cubic-bezier(.8, 0, .33, 1); border-radius: 0% 0% 100% 50%; top: 0px; background-color: #1b74bc; z-index: 9999; } nav.nav-open { transform: translateX(0px); border-radius: 0% 0% 0% 0%; /* background: rgba(255, 255, 255, 0.6);*/ background-color:#1b74bc; } nav .nav-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateX(-100px); opacity: 0; transition: all 900ms cubic-bezier(.9, 0, .33, 1); } nav .nav-links.fade-in { opacity: 1; transform: translateX(0px); } nav .nav-links .link { margin: 20px 0; text-decoration: none; font-family: 'TitilliumWeb'; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 1.2rem; transition: all 300ms cubic-bezier(.9, 0, .33, 1); } nav .nav-links .link:hover { color: rgba(0, 0, 0, .5); } /*FOOTER************************/ .footer{ display:flex; } .header, .footer { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .footer { position: fixed; bottom: 0; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; z-index: 400; -webkit-transition: .6s; transition: .6s; overflow: hidden; padding:35px; } .footer > * { width: 50%; text-transform: uppercase; /* font-size: 0.8em; */ letter-spacing: 1px; } .footer__rightside { text-align: right !important; float: right; } .search-link, .open-social { color: #fff; cursor: pointer; text-decoration: none; } .open-social .fa { margin-right: 8px; } /*HOME SECTION////////////////////////////////*/ #f1 { background: #83726b; flex: 1; cursor: pointer; transition: box-shadow 1s ease; } #f1:hover { box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4); } .second-line { flex: 1; display: flex; flex-direction: row; } #f2:hover { flex: 1; background: rgba(41, 112, 209, 0.90); cursor: pointer; transition: box-shadow 1s ease; box-shadow: inset 0 0 0 10px #1b74bc; } #f2 { flex: 1; background-image: url(https://www.peopleplace.eu/wp-content/themes/peopleplace/images/bg-employer.jpg); background-size: cover; background-position:top center; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition: 2s; } #f3:hover { flex: 1; background: rgba(41, 112, 209, 0.90); cursor: pointer; transition: box-shadow 1s ease; box-shadow: inset 0 0 0 10px #1b74bc; } #f3 { flex: 1; background-image: url(https://www.peopleplace.eu/wp-content/themes/peopleplace/images/bg-candidate.jpg); background-size: cover; background-position:top center; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition: 2s; } .inside { width: 100%; height: Calc(100% - 41px); margin: 20px 0; text-align: center; vertical-align: middle; color: #000; padding: 15px 15px; margin-top:100px; } blue-text{ color:#f6901f; } .inside:hover{ color: #fff; } .inside > span { height: 1px; width: 30%; background: #f6911f; display: block; margin: 0 auto; margin-bottom: 67px; margin-top: 35px; } .inside h3 { position: relative; top: 0%; color:#fff; transform: translateY(-50%); font-size: 38px; padding: 15px 0px; font-weight: bolder; } .inside h4 { color: #f6911f; position: relative; transform: translateY(-50%); margin-bottom: 14px; font-size: 18px; }
$(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"); } });

Related: See More


Questions / Comments: