"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 ----------> <!--=============================================== 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> <!-- ========================================== HEADER SECTION START ==========================================--> <!-- <section class="content-container"> <div class="landing-content"> <div class="landing-content-holder"> </div> </div> <video loop muted autoplay src="https://storage.googleapis.com/coverr-main/mp4/Going-Places.mp4" id="video-container"></video> </section> --> <!--====================== Home Banner======================--> <section class="main-wrap"> <section class="site-banner"> <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> <div class="headertitle"> <h4> Recruitment for top talent </h4> <h1> Talent? Meet<br> Opportunity. </h1> </div> <div class="search_form"> <div class="form-group form-inline"> <form class="request-form"> <input name="Email" type="email" id="Email" class="form-control user-email" placeholder="Search For Jobs"> <input type="submit" value="Search" name="send" placeholder="" class="request-btn"> </form> </div> </div> </section> <section class="for-for"> <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> </section> <!--=================FOOTER SECTION=====================--> <footer> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="text-warp"> <h4>About Us</h4> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Video</a></li> </div> </div> <div class="col-md-3"> <div class="text-warp"> <h4>Other</h4> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy policy</a></li> <li><a href="#">FAQ</a></li> </div> </div> <div class="col-md-3"> <div class="text-warp"> <h4>Contact</h4> <li><a href="#">support@saxon.com</a></li> <li><a href="#">214 726 2236</a></li> <li><a href="#">FAQ</a></li> </div> </div> <div class="col-md-3"> <div class="text-warp"> <h4>Adders</h4> <li><a href="#">1320 Greenway Dr,<br>Suite #660 Irving,<br>Texas 75038</a></li> </div> </div> </div> </div> </footer> <section class="copy-right"> <div class="text-center"><p>Copyright © 2017- 2018, Saxon Global All rights reserved.</p></div> </section> </section>
@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; } ::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #b50201; } .mr-top-250{ margin-top:250px; } .mr-top-150{ margin-top:150px; } .mr-top-100{ margin-top:100px; } /******************************** **********SUPPORT CLASS********** ********************************/ a:hover { text-decoration: none!important; } .position-rel { position: relative; } .m_top_20 { margin-top: 20px; } .m_bot_20 { margin-bottom: 40px; } .m_top_30 { margin-top: 30px; } .m_top_40 { margin-top: 40px; } .m_top_60 { margin-top: 60px; } .m_top_80 { margin-top: 80px; } .mar-auto { margin-left: auto; margin-right: auto; } /*TOP NAVBAR START==========================================*/ .main-wrap{ padding-left:70px; } .request-form { position: relative; margin-top: 25px; margin-bottom: 20px; margin-left: auto; width: 75%; margin-right: auto; } .search_form { position: absolute; z-index: 11; bottom: 0%; width: 100%; } .request-form .form-control { width: 100%; height: 75px; background-color: white; border: 0px solid white; border-radius: 0px; box-shadow: 0 8px 20px rgba(0,0,0,.2); outline: 0; display: inline-block; padding: 0 30px; font-size: 30px; font-weight: 400; text-shadow: none; letter-spacing: 1px; font-family: 'Comfortaa'; color: #476787; } .request-btn { padding: 4px 35px; position: absolute; z-index: 8; font-size: 30px; font-weight: 400; height: 75px; top: 0px; border-radius: 0px; right: 0px; transition: 0.5s; color: #ffffff; border: solid 0px; cursor: pointer; background-color: #f6911f; } .brand-logo { float: left; margin-left: 4px; width: 230px; margin-top: 7px; padding: 9px; } .brand-logo img{ max-width: 100%; } .topnav { overflow: hidden; z-index: 90; position: fixed; width: 100%; background-color: #1b73bc; min-height: 65px; } .topnav .topnav-right a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; min-width: 20px; transition: box-shadow 1s ease; } .topnav .topnav-right a:hover{ box-shadow: inset 0 0 0 50px rgba(255, 255, 255, .2); /* border-bottom: 1px solid rgba(255, 255, 255, .2);*/ } .topnav a.active { border-bottom: 1px solid gold; } .social { display: flex; width: 200px; /* background-color: #70665c;*/ margin-top:8px; } .social a { flex: 1; } .topnav-right { float: right; } /*SIDE NAVBAR=================================*/ nav { overflow: hidden; position: fixed; transform: translateX(-200px); 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: 12; } nav.nav-open { transform: translateX(0px); border-radius: 0% 0% 0% 0%; /* background: rgba(255, 255, 255, 0.6);*/ background-color:#1b74bc; } nav .menu-btn { position: absolute; top: 50%; right: 10%; padding: 0; width: 30px; cursor: pointer; z-index: 2; } nav .menu-btn .line { padding: 0; width: 30px; background: #fff; height: 2px; margin: 5px 0; transition: all 700ms cubic-bezier(.9, 0, .33, 1); } nav .menu-btn .line.line--1 { width: 30px; transform: rotate(0) translateY(0); } nav .menu-btn .line.line--1.line-cross { width: 30px; transform: rotate(45deg) translateY(10px); background: rgba(0,0,0,0.6); } nav .menu-btn .line.line--2 { width: 28px; transform: translateX(0); } nav .menu-btn .line.line--2.line-fade-out { width: 28px; transform: translate(30px); opacity: 0; } nav .menu-btn .line.line--3 { width: 20px; transform: rotate(0) translateY(0); } nav .menu-btn .line.line--3.line-cross { width: 30px; transform: rotate(-45deg) translateY(-10px); background: rgba(0,0,0,0.6); } 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); } /*VIDEO SECTION START==================================*/ .content-container .landing-content { position: absolute; top: 50%; left: 50%; ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .content-container #video-container { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(polina.jpg) no-repeat; background-size: cover; } .site-banner{ position: relative; } .site-banner.site-banner--vid { overflow: hidden } .site-banner .site-banner__vid { width: 100%; height: 100% } .site-banner .site-banner__vid video { width: 100%; height: 100%; display: block; object-fit: cover; /* position: absolute;*/ left: 0; top: 0 } .site-banner:before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ''; background: rgba(0, 0, 0, 0.66); } .site-banner.site-banner--vid:before { background: rgba(29, 37, 45, 0.7) } .site-banner:before { z-index: 1; } .boxes { position: absolute; bottom: 0px; margin: 0 auto; left: 0px; right: 0px; width: 45%; z-index: 5; } .first-line { flex: 1; display: flex; flex-direction: row; width: 50%; } #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 { flex: 1; background: #e4e4e4; cursor: pointer; transition: box-shadow 1s ease; } #f2:hover { box-shadow: inset 0 0 0 10px #f6911f; 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 { flex: 1; background: #e4e4e4; cursor: pointer; transition: box-shadow 1s ease; } #f3:hover { box-shadow: inset 0 0 0 10px #1b74bc; 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 0px; } .blue-text{ color:#1b72bc; } .inside:hover{ color: #fff; } .inside > span { height: 1px; width: 30%; background: #f6911f; display: block; margin: 0 auto; margin-bottom: 76px; margin-top: 50px; } .inside h3 { position: relative; top: 30%; transform: translateY(-50%); font-size: 50px; padding: 15px 0px; font-weight: bolder; } .inside h4 { color: #f6911f; position: relative; transform: translateY(-50%); margin-bottom: 50px; font-size: 18px; } .slidep { background: silver; flex: 5; overflow: hidden; } .headertitle { position: absolute; z-index: 9; color: white; padding-left: 15px; border-left: 6px solid #f6901f; letter-spacing: 1px; top: 335px; left: 160px; } .headertitle h1 { font-size: 75px; font-weight: bold; color: #fff; font-family: 'googleapis'; text-transform: uppercase; } /*=====================Footer=====================*/ footer{ padding: 50px 0px; background-color:#242424; } footer h4{ color:#fff; margin-bottom:15px; } footer li{ list-style-type: none; } footer li a { text-decoration: none; color: #fff; display: block; padding: 5px 0px; font-size: 14px; } .copy-right{ padding:10px 0px; background-color:#333333; } .copy-right p{ color:#fff; padding:0px; margin:0px; font-size:14px; }
$(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'); }) });

Related: See More


Questions / Comments: