Bootstrap nav-bar not displaying content outside its width - html

#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active {
position: relative;
}
.nav-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before,
.navbar::after {
height: 6px;
width: 3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom: -6px;
background: #14fe17;
}
.navbar::before {
left: 0px
}
.navbar::after {
right: 0px;
}
.navbar-nav {
width: 100%;
}
body {
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
z-index: 100000000;
pointer-events: none;
}
h2 {
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img {
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class="center-image">
<img src="vb.png">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
#font-face{
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar{
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active{
position: relative;
}
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before, .navbar::after{
height:6px;
width:3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom:-6px;
background: #14fe17;
}
.navbar::before{
left:0px
}
.navbar::after{
right:0px;
}
.navbar-nav{
width: 100%;
}
body{
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem ;
}
body::after{
width: 100%;
height:100%;
content: "";
position: absolute;
top:0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
z-index: 100000000;
pointer-events:none;
}
h2{
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img{
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav > li.nav-item > a.nav-link ,
ul.nav > li.nav-item > a.nav-link, div.tab-content{
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class= "container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class= "center-image">
<img src="vb.png">
</div>
</body>
<script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "js/main.js"></script>
</html>
I am trying to design my personal web-page with a Fallout 4 pipboy style. I am running into an error whereby I want to edit the lines on the ::before and ::after under the navbar to look more like a pipboy. The red you see on the picture is me trying to debug why the nav-item activebegins midway through the first item (Home) and extends all the way to the end of the page. Shouldn't it be just the length of the active item? I have posted my code regarding this issue below.
Any advice is appreciated!
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>

Related

How do I make a sidenav scrollbar?

I have a sidenav using a <ul> tag. How to make sidenav show scrollbar auto?
An Example of what my sidenav looks like
html:
<section class="sticky-top">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item">
<a class="nav-link" href="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 2 </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 3</a>
</li>
</ul>
</section>
css:
.nav {
position: absolute;
z-index : 3;
}
.navbar {
z-index : 3;
background-color: var(--white);
}

When I applied the sidebar styling by enclosing the <ul> element in a <div> element, I got the desired result. Hovering the sidebar (when the hover event occurs) opens the scrollbar.
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<!-- sidebar items -->
</ul>
</div>
.sidebar{
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
}
.sidebar:hover{
overflow-y: auto
}
The executable snippet is available below. The overflow-y: auto; style comment line defined in the .sidebar:hover block has been made to automatically display the scrollbar; Added overflow-y: auto; style to .sidebar block.
.sidebar {
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
overflow-y: auto;
}
.sidebar:hover {
/* overflow-y: auto */
}
.nav {
position: absolute;
z-index: 3;
}
.navbar {
z-index: 3;
background-color: var(--white);
}
.nav-link {
color: #ffffff;
font-size: 12px;
&:hover {
transition: color 0.4s ease-in;
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
}
&.active {
background-color: #007bff;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="sticky-top">
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
</ul>
</div>
</section>
</body>

My Navbar links are showing up under my navbar

I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

How to make Oblique lines with CSS / Bootstrap 3

How can I make a page like this with slanted lines?
Can I put an angle of 20 degrees for example? I have to put 3 div?
For now I put a first div to put a logo in the middle, then I put the navigation bar and I would like the navigation bar to be aligned with the angle just above the oblique line.
I have to work on bootstrap 3
I'm a bit lost. thank you very much for your help and explanations
<div class="container" style="background-color: #04342E; width:100%">
<img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div>
</div>
</div>

Either you can create div with clip-path I would recommand to use: https://bennettfeely.com/clippy/
Either you use background with linear-gradient.
DEMO with clip-path:
body{
background: #04342E;
margin:0;
}
div.polygon{
height: 100vh;
width: 100vw;
background: white;
clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
display:flex;
}
.content{
height: 50%;
width: 100%;
background-color:rgba(255,0,0,0.3); /** Just used to show the written area But it should be removed **/
margin:auto;
}
<div class="polygon">
<div class="content">
Lorem ipsum
</div>
</div>

.container {
background-color: #04342E;
width: 100%;
height: 500px;
position: relative;
}
.container::after {
position: absolute;
content: "";
left: 0px;
right: 0px;
bottom: 0px;
border-bottom: solid white 500px;
transform-origin: bottom right;
transform: skew(1000deg);
}
.container #content {
background-color: #04342E;
width: 100%;
height: 500px;
margin-top: 600px;
position: relative;
}
.container #content::after {
position: absolute;
content: "";
top: 0px;
right: 0px;
left: 0px;
border-top: solid white 500px;
transform-origin: top left;
transform: skew(-1000deg);
}
<div class="container">
<img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div id="content">
</div>
</div>
you can use psuedo classes in css to create this. see above for the code.

Bootstrap tabs with custom corners

I have tabs based on the Bootstrap 4 template, but recently I ran into this problem: I need to make smooth corners at the bottom, more details in the screenshot from the layout below.
What is available:
What should be done (I circled in red):
My code:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
</li>
<li class="nav-item">
<a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
</li>
<li class="nav-item">
<a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="description"></div>
<div class="tab-pane fade" id="characteristics"></div>
<div class="tab-pane fade" id="opinion"></div>
</div>

Maybe it will help.
.nav-tabs .nav-link {
position: relative;
}
.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::before {
content: "";
border: 1px solid;
width: 8px;
height: 8px;
position: absolute;
top: -1px;
z-index: 9;
background-color: #fff;
}
.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link.active::after {
border-color: #fff #dee2e6 #dee2e6 #fff;
border-radius: 0.25rem 0;
left: -1px;
}
.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::before {
border-color: #fff #fff #dee2e6 #dee2e6;
border-radius: 0 0.25rem;
right: -1px;
}
<!-- Libraries -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
</li>
<li class="nav-item">
<a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
</li>
<li class="nav-item">
<a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="description"></div>
<div class="tab-pane fade" id="characteristics"></div>
<div class="tab-pane fade" id="opinion"></div>
</div>

sticky-top and logo display

I've been struggling with one problem related to displaying a logo when a sticky header is activated. The menu I've accomplished so far works as intended, but I need to display the logo in a small version as soon the header becomes sticky and keep the options centered. Below what I've got:
And I need something like this as soon as the div becomes sticky:
Here's my code so far:
.navbar {
background-color: #fff !important;
}
.navbar .navbar-nav li a {
color: #b29b72 !important;
}
.navbar .navbar-brand {
color: #b29b72 !important;
}
.navbar .navbar-brand:hover {
color: #b29b72 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* HOMEPAGE *****************************************************/
.video-container {
padding-right: 0px;
padding-left: 0px;
}
#splash {
position: relative;
text-align: center;
height: 300px;
background-color: #878787;
}
#splash .video {
position: relative;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-bottom: 1px solid #eee;
}
#splash .opaque {
opacity: 0.4;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-options {
padding-top: 12px;
}
.menu-options a {
color: #b29b72;
font-weight: 600;
font-size: 20px;
}
#menu-row {
height: 50px;
background-color: #000000 !important;
}
.menu-options ul {
margin: 0;
padding: 0;
}
.menu-options ul li {
display: inline-block;
width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Fantastic Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
</li>
<button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="menu-row" class="sticky-top">
<div class="container">
<div class="row">
<div class="col-12 menu-options text-center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</li>
<li>OPTION 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid video-container">
<div id="splash">
<div class="video">
<video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</video>
<div class="opaque"></div>
</div>
</div>
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12">
</div>
</div>
</div>
</div>
</body>
</html>

You'll need two logos (large - standard. Small - scroll / navigation). Then do the following add the following JQuery to your code, but make sure you use the specific class names (not the ones I've used in my example).
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>