<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 ----------> <nav class="navbar navbar-expand-md navbar-dark fixed-top" id="banner"> <div class="container"> <a class="navbar-brand" href="#"><span>Logo</span> Here</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </div> </div> </nav>

@import url('https://fonts.googleapis.com/css?family=Gothic+A1|Kaushan+Script|Libre+Baskerville|Lobster'); .navbar-nav .nav-item .nav-link { padding: 1.1em 1em !important; font-size: 120%; font-weight: 500; letter-spacing: 1px; color: #fff; font-family: 'Gothic A1', sans-serif; } .navbar-nav .nav-item .nav-link:hover { color: #fed136; } .navbar-expand-md .navbar-nav .dropdown-menu { border-top: 3px solid #fed136; } .dropdown-item:hover { background-color: #fed136; color: #fff; } nav { -webkit-transition: padding-top .5s, padding-bottom .5s; -moz-transition: padding-top .5s, padding-bottom .5s; transition: padding-top .5s, padding-bottom .5s; border: none; } .shrink { padding-top: 0; padding-bottom: 0; background-color: rgb(223, 18, 18); } /* mobile view */ @media (max-width:500px) { .navbar-nav { background-color: rgb(223, 18, 18); border-top: 3px solid #fed136; color: #fff; z-index: 1; margin-top: 5px; } .navbar-nav .nav-item .nav-link { padding: 0.7em 1em !important; font-size: 100%; font-weight: 500; } } @media (max-width:768px) { } /******************************************/ /* youtube */ /******************************************/ .video-container { width: 100vw; height: 100vh; overflow: hidden; position: relative; } .video-container iframe, { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container iframe, { pointer-events: none; } .video-container iframe { position: absolute; top: -60px; left: 0; width: 100%; height: calc(100% + 120px); } .video-foreground { pointer-events: none; }