Develop Reference

How to change the background of navbar as you scroll using react?

I am making a website. So, here is my code:
#import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
background-position: center;
background-repeat: repeat;
background-size: 7%;
background-color: #fff;
overflow-x: hidden;
transition: all 200ms linear;
}
::selection {
color: #fff;
background-color: #0087ff;
}
::-moz-selection {
color: #fff;
background-color: #0087ff;
}
.start-header {
opacity: 1;
transform: translateY(0);
padding: 20px 0;
box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.2);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on {
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
padding: 10px 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img {
height: 24px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
padding: 0;
}
.navbar-brand img {
height: 28px;
width: auto;
display: block;
filter: brightness(10%);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar-toggler {
float: right;
border: none;
padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: none;
}
.navbar-light .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
border-bottom: 1px solid #fff;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 1px;
background-color: #fff;
top: 0;
left: 0;
content: "";
z-index: 2;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
color: #212121 !important;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #0087ff !important;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
}
.nav-item:after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: "";
background-color: #0087ff;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover:after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover:after {
opacity: 0;
}
.nav-item {
position: relative;
transition: all 200ms linear;
}
.full-height {
height: 100vh;
}
.over-hide {
overflow: hidden;
}
.absolute-center {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: 40px;
transform: translateY(-50%);
z-index: 20;
}
#circle {
position: absolute;
top: -11px;
left: -13px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
}
.switched {
border-color: #fff !important;
background: #0087ff !important;
}
.switched #circle {
left: 43px;
box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
background: #fff;
}
.nav-item .dropdown-menu {
transform: translate3d(0, 10px, 0);
visibility: hidden;
opacity: 0;
max-height: 0;
display: block;
padding: 0;
margin: 0;
transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
padding: 10px !important;
margin: 0;
font-size: 13px;
letter-spacing: 1px;
color: #212121;
background-color: #fcfaff;
border: none;
border-radius: 3px;
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
transition: all 200ms linear;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-item {
padding: 3px 15px;
color: #212121;
border-radius: 2px;
transition: all 200ms linear;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #fff;
background-color: #0087ff;
}
#media (max-width: 767px) {
.nav-item:after {
display: none;
}
.nav-item::before {
position: absolute;
display: block;
top: 15px;
left: 0;
width: 11px;
height: 1px;
content: "";
border: none;
background-color: #fff;
vertical-align: 0;
}
.dropdown-toggle::after {
position: absolute;
display: block;
top: 10px;
left: -23px;
width: 1px;
height: 11px;
content: "";
border: none;
background-color: #fff;
vertical-align: 0;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(90deg);
opacity: 0;
}
.dropdown-menu {
padding: 0 !important;
background-color: transparent;
box-shadow: none;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
margin-top: 10px !important;
margin-bottom: 20px !important;
}
}
/* #Link to page
================================================== */
.logo {
position: absolute;
bottom: 30px;
right: 30px;
display: block;
z-index: 100;
transition: all 250ms linear;
}
.logo img {
height: 26px;
width: auto;
display: block;
filter: brightness(10%);
transition: all 250ms linear;
}
body.dark .logo img {
filter: brightness(100%);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="navigation-wrap start-header start-style">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto py-4 py-md-0">
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4 active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<Link className="nav-link" to="/blogs"> Blogs
</Link>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<Link className="nav-link" to="/contact"> Contact
</Link>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#">
Journal
</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#">
Contact
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see, I have made a navbar. It is transparent. But the thing is, I want it to change color to white as the user scrolls down after a specific div. You can make it white by adding <div class="navigation-wrap bg-light start-header start-style"> I have no idea how to implement this. I have seen some stackoverflow answers, but none of them work.
Thanks in advance.

I only added javascript in your code everything else is same
Steps I took:
Added a scroll event listner to your html.
Wrote a condition to replace the class name of your element if the vertical scroll amount is greater than 50px.
If not then replace and set your class name to default. (helps when you scroll back to top)
window.addEventListener('scroll', navScroll);
//adding scroll event listner
function navScroll() {
if (window.scrollY > 50) {
// Replace all classes from element after 50px of scroll
document.getElementById("myNav").className = "navigation-wrap bg-dark start-header start-style";
} else {
document.getElementById("myNav").className = "navigation-wrap start-header start-style";
}
}
#import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
background-position: center;
background-repeat: repeat;
background-size: 7%;
background-color: #fff;
overflow-x: hidden;
transition: all 200ms linear;
height: 200vh;
}
::selection {
color: #fff;
background-color: #0087ff;
}
::-moz-selection {
color: #fff;
background-color: #0087ff;
}
.start-header {
opacity: 1;
transform: translateY(0);
padding: 20px 0;
box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.2);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on {
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
padding: 10px 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img {
height: 24px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
padding: 0;
}
.navbar-brand img {
height: 28px;
width: auto;
display: block;
filter: brightness(10%);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar-toggler {
float: right;
border: none;
padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: none;
}
.navbar-light .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
border-bottom: 1px solid #fff;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 1px;
background-color: #fff;
top: 0;
left: 0;
content: "";
z-index: 2;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
color: #212121 !important;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #0087ff !important;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
}
.nav-item:after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: "";
background-color: #0087ff;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover:after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover:after {
opacity: 0;
}
.nav-item {
position: relative;
transition: all 200ms linear;
}
.full-height {
height: 100vh;
}
.over-hide {
overflow: hidden;
}
.absolute-center {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: 40px;
transform: translateY(-50%);
z-index: 20;
}
#circle {
position: absolute;
top: -11px;
left: -13px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
}
.switched {
border-color: #fff !important;
background: #0087ff !important;
}
.switched #circle {
left: 43px;
box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
background: #fff;
}
.nav-item .dropdown-menu {
transform: translate3d(0, 10px, 0);
visibility: hidden;
opacity: 0;
max-height: 0;
display: block;
padding: 0;
margin: 0;
transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
padding: 10px !important;
margin: 0;
font-size: 13px;
letter-spacing: 1px;
color: #212121;
background-color: #fcfaff;
border: none;
border-radius: 3px;
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
transition: all 200ms linear;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-item {
padding: 3px 15px;
color: #212121;
border-radius: 2px;
transition: all 200ms linear;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #fff;
background-color: #0087ff;
}
#media (max-width: 767px) {
.nav-item:after {
display: none;
}
.nav-item::before {
position: absolute;
display: block;
top: 15px;
left: 0;
width: 11px;
height: 1px;
content: "";
border: none;
background-color: #fff;
vertical-align: 0;
}
.dropdown-toggle::after {
position: absolute;
display: block;
top: 10px;
left: -23px;
width: 1px;
height: 11px;
content: "";
border: none;
background-color: #fff;
vertical-align: 0;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(90deg);
opacity: 0;
}
.dropdown-menu {
padding: 0 !important;
background-color: transparent;
box-shadow: none;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
margin-top: 10px !important;
margin-bottom: 20px !important;
}
}
/* #Link to page
================================================== */
.logo {
position: absolute;
bottom: 30px;
right: 30px;
display: block;
z-index: 100;
transition: all 250ms linear;
}
.logo img {
height: 26px;
width: auto;
display: block;
filter: brightness(10%);
transition: all 250ms linear;
}
body.dark .logo img {
filter: brightness(100%);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div id="myNav" class="navigation-wrap start-header start-style">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto py-4 py-md-0">
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4 active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<Link className="nav-link" to="/blogs"> Blogs
</Link>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<Link className="nav-link" to="/contact"> Contact
</Link>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#">
Journal
</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#">
Contact
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>

How can I construct my navbar to work properly?

Basically, I have created a responsive navigation bar for my website. However, there is a problem I am having. When the user shrinks their browser size and clicks the hamburger on the side, the navbar does not work. To fix this, the user will have to refresh the page in order to click the hamburger to see the navbar on a shrinked size. I have tried to fix this but I do not know what is wrong. How can I make sure that the navbar works whenever the screen is decreased so the user will not have to refresh the page? Any help is appreciated. Here is my code below.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767.98px)').matches) {
$(".navbar-toggle").click(function () {
$(".navbar-toggle").toggleClass("cross");
$("#navbarToggle").toggleClass("active");
$("body").toggleClass("overflow-hidden");
});
}
});
header {
-webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
-moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
position: relative;
z-index: 999;
transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
-webkit-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
-moz-transition: .4s;
transition: .4s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
-moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
padding: 0.5rem 0;
}
/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
display: block;
}
.dropdown-menu.dropdown-menu-hover {
margin-top: 0;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
-ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
border-radius: 6px !important;
}
.dropdown-menu.show {
display: block !important;
}
/* dropdown open on hover css end*/
/* custom css for dropdown caret */
.dropdown-toggle::after {
height: 8px;
width: 8px;
border: 0;
border-right: 2px solid #757575;
border-bottom: 2px solid #757575;
transform: rotate(45deg);
position: absolute;
right:15px;
top: 16px;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.navbar-expand-lg .navbar-nav .nav-link.dropdown{
padding-right: 2rem;
}
.navbar-nav .dropdown-toggle{
color:rgba(0,0,0,.5);
}
.navbar-nav .dropdown-toggle:hover{
text-decoration: none;
}
/* rounded buttons css */
.btn-round {
border-radius: 40px;
}
/* css for mobile view */
#media (max-width: 991.98px) {
div#navbarToggle {
-webkit-transform: translateX(-120%);
-ms-transform: translateX(-120%);
transform: translateX(-120%);
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
background: #fff;
z-index: 11;
position: fixed;
left: 0;
width: 300px;
bottom: 0;
top: 0;
height: 100vh;
-webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
}
div#navbarToggle.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.navbar-nav .dropdown-menu{
box-shadow: none !important;
}
.navbar-toggle {
position: relative;
background: #fff;
}
.navbar-toggle-icon {
position: absolute;
background: #a0a0a0;
width: 100%;
height: 2px;
top: 50%;
right: 0px;
margin-top: 0px;
opacity: 1;
}
.navbar-toggle-icon::before {
position: absolute;
background: #a0a0a0;
width: 24px;
height: 2px;
top: 6px;
content: "";
display: block;
}
.navbar-toggle-icon::after {
position: absolute;
background: #a0a0a0;
width: 24px;
height: 2px;
bottom: 6px;
content: "";
display: block;
}
.navbar-toggle-icon::after, .navbar-toggle-icon::before, .navbar-toggle-icon {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.navbar-toggle.cross .navbar-toggle-icon::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
bottom: 0px;
}
.navbar-toggle.cross .navbar-toggle-icon::before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 0px;
}
.navbar-toggle.cross .navbar-toggle-icon {
background-color: transparent;
}
header .navbar-light .navbar-toggle {
border: 0;
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
}
/* animation css for dropdown */
#-webkit-keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#-webkit-keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Navbar</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body translate="no" >
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid container-xl">
<a class="navbar-brand" href="javascript:void(0)">
<h1>Logo</h1>
</a>
<div class="navbar-toggle" data-toggle="collapse" data-target="navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</div>
<div class=" navbar-collapse" id="navbarToggle">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="javascript:void(0)">About</a>
</li>
<li class="nav-item">
<div class="dropdown cursor-pointer align-items-center nav-link">
<a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropwown
</a>
<div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
aria-labelledby="data-nav">
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>All</span>
</a>
<a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
<span>Menu 1</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 2</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 3</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 4</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 5</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="javascript:void(0)">
Contact us
</a>
</li>
</ul>
<div class="nav-buttons">
<div class="nav-item">
<a class="btn btn-round btn-outline-primary btn-light ml-3 btn-sm" href="javascript:void(0)">
Login
</a>
<a class="btn btn-round btn-primary ml-3 btn-sm" href="javascript:void(0)">
Sign Up
</a>
</div>
</div>
</div>
</nav>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src="script.js"></script>
</body>
</html>

This is responsive navbar made by using only bootstrap 4 Classes.
It is not exactly same as you want, i think. But, please check and
take some ref. I have tried to make it same as yours.
CSS Code
<style>
header {
-webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
-moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
position: relative;
z-index: 999;
transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
-webkit-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
-moz-transition: .4s;
transition: .4s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
-moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
padding: 0.5rem 0;
}
.navbar-toggle {
position: relative;
background: #fff;
}
/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
display: block;
text-decoration: none;
}
a{
color: darkgrey;
}
.dropdown-menu.dropdown-menu-hover {
margin-top: 0;
background-color:#f8f9fa!important;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
-ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
border-radius: 6px !important;
}
/* animation css for dropdown */
#-webkit-keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#-webkit-keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
</style>
HTML code
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<div class="dropdown cursor-pointer align-items-center nav-link">
<a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
aria-labelledby="data-nav">
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>All</span>
</a>
<a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
<span>Menu 1</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 2</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 3</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 4</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 5</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<div class="nav-buttons">
<div class="nav-item">
<a class="btn btn-round btn-outline-primary btn-light ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
Login
</a>
<a class="btn btn-round btn-primary ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
Sign Up
</a>
</div>
</div>
</div>
</nav>
</body>

How to show images as automatic responsive size in grid/gallery view?

I have created this page using some resources. But i need images to be shown in the output picture.
Also the sidebar is automatically opening while loading page, i need to do close it by default.
i have tried to toggle class in JavaScript, but the closing animation is showing on once after page loads. this is pretty annoying.
(function() {
$('#msbo').on('click', function() {
$('body').toggleClass('msb-x');
});
}());
.navbar-default {
margin-left: 200px;
}
.msb {
width: 200px;
background-color: #F5F7F9;
position: fixed;
left: 0;
top: 0;
right: auto;
min-height: 100%;
overflow-y: auto;
white-space: nowrap;
height: 100%;
z-index: 1;
border-right: 1px solid #ddd;
}
.msb .navbar {
border: none;
margin-left: 0;
background-color: inherit;
}
.msb .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 20px;
background: #fff;
}
.msb .navbar-nav .panel {
border: 0 none;
box-shadow: none;
margin: 0;
background: inherit;
}
.msb .navbar-nav li {
display: block;
width: 100%;
}
.msb .navbar-nav li a {
padding: 15px;
color: #5f5f5f;
}
.msb .navbar-nav li a .glyphicon,
.msb .navbar-nav li a .fa {
margin-right: 8px;
}
.msb .nb {
padding-top: 5px;
padding-left: 10px;
margin-bottom: 30px;
overflow: hidden;
}
ul.nv,
ul.ns {
position: relative;
padding: 0;
list-style: none;
}
.nv {
/*ns: nav-sub*/
}
.nv li {
display: block;
position: relative;
}
.nv li::before {
clear: both;
content: "";
display: table;
}
.nv li a {
color: #444;
padding: 10px 25px;
display: block;
vertical-align: middle;
}
.nv li a .ic {
font-size: 16px;
margin-right: 5px;
font-weight: 300;
display: inline-block;
}
.nv .ns li a {
padding: 10px 50px;
}
/*main content wrapper*/
.mcw {
margin-left: 200px;
position: relative;
min-height: 100%;
/*content view*/
}
/*globals*/
a,
a:focus,
a:hover {
text-decoration: none;
}
.inbox .container-fluid {
padding-left: 0;
padding-right: 0;
}
.inbox ul,
.inbox li {
margin: 0;
padding: 0;
}
.inbox ul li {
list-style: none;
}
.inbox ul li a {
display: block;
padding: 10px 20px;
}
.msb,
.mnb {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mcw {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body.msb-x .mcw,
body.msb-x .mnb {
margin-left: 0;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body.msb-x .msb {
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Slide in animation */
#-moz-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#-webkit-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
margin-left: 200px;
}
}
#-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 0;
}
}
#keyframes bodyslidein {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
#-moz-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-right: 0;
}
}
#-webkit-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
#keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
.video-list-thumbs>li {
margin-bottom: 12px;
}
.video-list-thumbs>li>a {
display: block;
position: relative;
background-color: #111;
color: #fff;
padding: 8px;
border-radius: 4px;
}
.video-list-thumbs>li>a:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
text-decoration: none
}
.video-list-thumbs h2 {
bottom: 0;
font-size: 14px;
height: 33px;
margin: 8px 0 0;
}
.video-list-thumbs .glyphicon-play-circle {
font-size: 60px;
opacity: 0.6;
position: absolute;
right: 39%;
top: 31%;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
transition: all 500ms ease-in-out;
}
.video-list-thumbs>li>a:hover .glyphicon-play-circle {
color: #fff;
opacity: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.video-list-thumbs .duration {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2px;
color: #fff;
font-size: 11px;
font-weight: bold;
left: 12px;
line-height: 13px;
padding: 2px 3px 1px;
position: absolute;
top: 12px;
transition: all 500ms ease;
}
.video-list-thumbs>li>a:hover .duration {
background-color: #000;
}
#media (min-width:320px) and (max-width: 480px) {
.video-list-thumbs .glyphicon-play-circle {
font-size: 35px;
right: 36%;
top: 27%;
}
.video-list-thumbs h2 {
bottom: 0;
font-size: 12px;
height: 22px;
margin: 8px 0 0;
}
}
body {
background-color: #fff;
font-size: 18px;
letter-spacing: 0.01em;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Video Visualizer</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
</head>
<body style="background-color: #f2f3f3;">
<nav class="mnb navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<div style="padding: 8px 0;">
<i class="ic fa fa-bars"></i>
</div>
</div>
</nav>
<div class="msb" id="msb">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="brand-wrapper">
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">
Video Visualizer
</a>
</div>
</div>
</div>
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li><i class="fa fa-dashboard"></i> Home</li>
<li><i class="fa fa-puzzle-piece"></i> Components</li>
<li><i class="fa fa-heart"></i> Extras</li>
</ul>
</div>
</nav>
</div>
<div class="mcw">
<div class="container">
<br>
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio Bravo, antes su">
<img src="https://images.pexels.com/photos/4111719/pexels-photo-4111719.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudio Bravo, antes su </h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudiocon el Barça en la Liga">
<img src="https://images.pexels.com/photos/1991933/pexels-photo-1991933.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudiocon el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo, antesa">
<img src="https://images.pexels.com/photos/5593847/pexels-photo-5593847.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Bravo, antesa</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio la Liga">
<img src="https://images.pexels.com/photos/3029023/pexels-photo-3029023.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudio la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Barça en la Liga">
<img src="https://images.pexels.com/photos/3016317/pexels-photo-3016317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo Barça en la Liga">
<img src="https://images.pexels.com/photos/5255552/pexels-photo-5255552.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Bravo Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
</ul>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</body>
</html>
Actual:
Expected:

You can use flex-box flex-direction and set it to column.
.mcw .container ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100VH;
align-content: flex-start;
}
This will make the items go down the page and you will need to play around with the height to get more columns. But as you can see it works by using full screen and resizing the browser window.
You will need to override some of the bootstrap classes too. The ones below aren't really needed or need to be overridden or unset as shown.
unset flex in these 2 classes.
.col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: unset;
max-width: 25%;
}
.col-sm-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: unset;
max-width: 33.333333%;
}
(function() {
$('#msbo').on('click', function() {
$('body').toggleClass('msb-x');
});
}());
.navbar-default {
margin-left: 200px;
}
.msb {
width: 200px;
background-color: #F5F7F9;
position: fixed;
left: 0;
top: 0;
right: auto;
min-height: 100%;
overflow-y: auto;
white-space: nowrap;
height: 100%;
z-index: 1;
border-right: 1px solid #ddd;
}
.msb .navbar {
border: none;
margin-left: 0;
background-color: inherit;
}
.msb .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 20px;
background: #fff;
}
.msb .navbar-nav .panel {
border: 0 none;
box-shadow: none;
margin: 0;
background: inherit;
}
.msb .navbar-nav li {
display: block;
width: 100%;
}
.msb .navbar-nav li a {
padding: 15px;
color: #5f5f5f;
}
.msb .navbar-nav li a .glyphicon,
.msb .navbar-nav li a .fa {
margin-right: 8px;
}
.msb .nb {
padding-top: 5px;
padding-left: 10px;
margin-bottom: 30px;
overflow: hidden;
}
ul.nv,
ul.ns {
position: relative;
padding: 0;
list-style: none;
}
.nv {
/*ns: nav-sub*/
}
.nv li {
display: block;
position: relative;
}
.nv li::before {
clear: both;
content: "";
display: table;
}
.nv li a {
color: #444;
padding: 10px 25px;
display: block;
vertical-align: middle;
}
.nv li a .ic {
font-size: 16px;
margin-right: 5px;
font-weight: 300;
display: inline-block;
}
.nv .ns li a {
padding: 10px 50px;
}
/*main content wrapper*/
.mcw {
margin-left: 200px;
position: relative;
min-height: 100%;
/*content view*/
}
.mcw .container ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 80VH;
align-content: flex-start;
}
col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex:unset!important;
max-width: 25%;
}
.col-sm-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: unset!important;
max-width: 33.333333%;
}
/*globals*/
a,
a:focus,
a:hover {
text-decoration: none;
}
.inbox .container-fluid {
padding-left: 0;
padding-right: 0;
}
.inbox ul,
.inbox li {
margin: 0;
padding: 0;
}
.inbox ul li {
list-style: none;
}
.inbox ul li a {
display: block;
padding: 10px 20px;
}
.msb,
.mnb {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mcw {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body.msb-x .mcw,
body.msb-x .mnb {
margin-left: 0;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body.msb-x .msb {
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Slide in animation */
#-moz-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#-webkit-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
#-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
#-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
margin-left: 200px;
}
}
#-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 0;
}
}
#keyframes bodyslidein {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
#-moz-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-right: 0;
}
}
#-webkit-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
#keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
.video-list-thumbs>li {
margin-bottom: 12px;
}
.video-list-thumbs>li>a {
display: block;
position: relative;
background-color: #111;
color: #fff;
padding: 8px;
border-radius: 4px;
}
.video-list-thumbs>li>a:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
text-decoration: none
}
.video-list-thumbs h2 {
bottom: 0;
font-size: 14px;
height: 33px;
margin: 8px 0 0;
}
.video-list-thumbs .glyphicon-play-circle {
font-size: 60px;
opacity: 0.6;
position: absolute;
right: 39%;
top: 31%;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
transition: all 500ms ease-in-out;
}
.video-list-thumbs>li>a:hover .glyphicon-play-circle {
color: #fff;
opacity: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.video-list-thumbs .duration {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2px;
color: #fff;
font-size: 11px;
font-weight: bold;
left: 12px;
line-height: 13px;
padding: 2px 3px 1px;
position: absolute;
top: 12px;
transition: all 500ms ease;
}
.video-list-thumbs>li>a:hover .duration {
background-color: #000;
}
#media (min-width:320px) and (max-width: 480px) {
.video-list-thumbs .glyphicon-play-circle {
font-size: 35px;
right: 36%;
top: 27%;
}
.video-list-thumbs h2 {
bottom: 0;
font-size: 12px;
height: 22px;
margin: 8px 0 0;
}
}
body {
background-color: #fff;
font-size: 18px;
letter-spacing: 0.01em;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Video Visualizer</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
</head>
<body style="background-color: #f2f3f3;">
<nav class="mnb navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<div style="padding: 8px 0;">
<i class="ic fa fa-bars"></i>
</div>
</div>
</nav>
<div class="msb" id="msb">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="brand-wrapper">
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">
Video Visualizer
</a>
</div>
</div>
</div>
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li><i class="fa fa-dashboard"></i> Home</li>
<li><i class="fa fa-puzzle-piece"></i> Components</li>
<li><i class="fa fa-heart"></i> Extras</li>
</ul>
</div>
</nav>
</div>
<div class="mcw">
<div class="container">
<br>
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio Bravo, antes su">
<img src="https://images.pexels.com/photos/4111719/pexels-photo-4111719.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudio Bravo, antes su </h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudiocon el Barça en la Liga">
<img src="https://images.pexels.com/photos/1991933/pexels-photo-1991933.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudiocon el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo, antesa">
<img src="https://images.pexels.com/photos/5593847/pexels-photo-5593847.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Bravo, antesa</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Claudio la Liga">
<img src="https://images.pexels.com/photos/3029023/pexels-photo-3029023.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Claudio la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Barça en la Liga">
<img src="https://images.pexels.com/photos/3016317/pexels-photo-3016317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a class="modalclick" href="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" title="Bravo Barça en la Liga">
<img src="https://images.pexels.com/photos/5255552/pexels-photo-5255552.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Barca" class="img-responsive" width="100%" height="100%" />
<h2>Bravo Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<!-- <span class="duration">03:15</span> -->
</a>
</li>
</ul>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</body>
</html>
Here is a sample preview

How do I make the Drop down Button work html css

So im creating a website and I have it so when the width of the window is smaller then 768px then the navbar collapses. The navbar collapses but does not show the the individual items on navbar. The nav bar collapse is a vertical navbar. I am using Bootstrap By the way. So to sum it all up I have a vertical menue/navigation bar yet I am having trouble with getting the dropdowns to open.
here is my html:
-->
<header id="home">
<!-- Background Image -->
<div class="bg-img" style="background-image: url('./img/background1.png');">
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="index.html">
<img class="logo" src="img/Logo.png" alt="logo">
<img class="logo-alt" src="img/Logo.png" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right">
<li>Home</li>
<li class="has-dropdown">About US
<ul class="dropdown">
<li>About Us</li>
<li>Our Team</li>
</ul>
</li>
<li class="has-dropdown">NonProfits
<ul class="dropdown">
<li>Requirements</li>
<li>Services</li>
<li>Join Our Program</li>
</ul>
</li>
<li class="has-dropdown">Volunteers
<ul class="dropdown">
<li>Overview</li>
<li>Sign Up</li>
</ul>
</li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- home wrapper -->
<div class="home-wrapper">
<div class="container">
<div class="row">
<!-- home content -->
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h1 id="changing-word" class="white-text">We Are Creative Agency</h1>
<p class="white-text">Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere.
</p>
<button class="white-btn">Get Started!</button>
</div>
</div>
<!-- /home content -->
</div>
</div>
</div>
<!-- /home wrapper -->
</header>
here is my css:
body {
font-family: 'Varela Round', sans-serif;
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
color: #868F9B;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-top: 0px;
margin-bottom: 20px;
color: #10161A;
}
h1 {
font-size: 54px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
a {
color: #6195FF;
text-decoration: none;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
a:hover, a:focus {
text-decoration: none;
outline: none;
opacity: 0.8;
color: #6195FF;
}
.main-color {
color: #6195FF;
}
.white-text {
color: #FFF;
}
::-moz-selection {
background-color: #6195FF;
color: #FFF;
}
::selection {
background-color: #6195FF;
color: #FFF;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none
}
/* -- section -- */
.section {
position: relative;
}
/* -- background section -- */
.bg-grey {
background-color: #FAFAFA;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
}
.bg-dark {
background-color: #1C1D21;
}
/* -- background image section -- */
.bg-img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.bg-img .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: .8;
background: #1C1D21;
}
/* -- section header -- */
.section-header {
position: relative;
margin-bottom: 60px;
}
.section-header .title {
text-transform: capitalize;
}
.title:after {
content:"";
display:block;
height:4px;
width:40px;
background-color: #6195FF;
margin-top: 20px;
}
/* -- Input -- */
.main-btn, .white-btn, .outline-btn {
display: inline-block;
padding: 10px 35px;
margin: 3px;
border: 2px solid transparent;
border-radius: 3px;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.main-btn {
background: #6195FF;
color: #FFF;
}
.white-btn {
background: #FFF;
color: #10161A !important;
}
.outline-btn {
background: transparent;
color: #6195FF !important;
border-color: #6195FF;
}
.main-btn:hover, .white-btn:hover, .outline-btn:hover {
opacity: 0.8;
}
.navbar-brand {
padding: 0;
}
.navbar-brand .logo, .navbar-brand .logo-alt {
max-height: 50px;
display: block;
}
#nav:not(.nav-transparent):not(.fixed-nav) .navbar-brand .logo-alt {
display: none;
}
#nav.nav-transparent:not(.fixed-nav) .navbar-brand .logo {
display: none;
}
#nav.fixed-nav .navbar-brand .logo-alt {
display: none;
}
#media only screen and (max-width: 767px) {
#nav.nav-transparent .navbar-brand .logo-alt {
display: none !important;
}
#nav.nav-transparent .navbar-brand .logo {
display: block !important;
}
}
/*------------------------------------*\
Navigation
\*------------------------------------*/
#nav {
padding: 10px 0px;
background: #FFF;
-webkit-transition: 0.2s padding;
transition: 0.2s padding;
z-index: 999;
}
#nav.navbar {
border: none;
border-radius: 0;
margin-bottom: 0px;
}
#nav.fixed-nav {
position: fixed;
left: 0;
right: 0;
padding: 0px 0px;
background-color: #FFF !important;
border-bottom: 1px solid #EEE;
}
#nav.nav-transparent {
background: transparent;
}
/* -- default nav -- */
#media only screen and (min-width: 768px) {
.main-nav li {
padding: 0px 15px;
}
.main-nav li a {
font-size: 19px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.main-nav>li>a {
color: #10161A;
padding: 15px 0px;
}
#nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
color: #fff;
}
.main-nav>li>a:hover, .main-nav>li>a:focus, .main-nav>li.active>a {
background: transparent;
color: red;
}
.main-nav>li>a:after {
content: "";
display: block;
background-color: red;
height: 2px;
width: 0%;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.main-nav>li>a:hover:after, .main-nav>li.active>a:after {
width: 100%;
}
/* dropdown */
.has-dropdown {
position: relative;
}
.has-dropdown>a:before {
font-family: 'FontAwesome';
content: "\f054";
font-size: 6px;
margin-left: 6px;
float: right;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.2s transform;
transition: 0.2s transform;
}
.dropdown {
position: absolute;
right: -50%;
top: 0;
background-color: red;
width: 200px;
-webkit-box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
-webkit-transform: translateY(15px) translateX(50%);
-ms-transform: translateY(15px) translateX(50%);
transform: translateY(15px) translateX(50%);
opacity: 0;
visibility: hidden;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>.has-dropdown>.dropdown {
top: 100%;
right: 50%;
}
.main-nav>.has-dropdown>.dropdown .dropdown.dropdown-left {
right: 150%;
}
.dropdown li a {
display: block;
color: #FFF;
border-top: 1px solid rgba(250, 250, 250, 0.1);
padding: 10px 0px;
}
.dropdown li:nth-child(1) a {
border-top: none;
}
.has-dropdown:hover>.dropdown {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px) translateX(50%);
-ms-transform: translateY(0px) translateX(50%);
transform: translateY(0px) translateX(50%);
}
.has-dropdown:hover>a:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.nav-collapse {
display: none;
}
}
/* -- mobile nav -- */
#media only screen and (max-width: 767px) {
#nav {
padding: 0px 0px;
}
#nav.nav-transparent {
background: #FFF;
}
.main-nav {
position: fixed;
right: 0;
height: calc(100vh - 80px);
-webkit-box-shadow: 0px 80px 0px 0px #1C1D21;
box-shadow: 0px 80px 0px 0px #1C1D21;
max-width: 250px;
width: 0%;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
margin: 0;
overflow-y: auto;
background: #1C1D21;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
#nav.open .main-nav {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
width: 100%;
}
.main-nav li {
border-top: 1px solid rgba(250, 250, 250, 0.1);
}
.main-nav li a {
display: block;
color: #FFF;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>li.active {
border-left: 6px solid red;
}
.main-nav li a:hover, .main-nav li a:focus {
background-color: red;
color: #FFF;
opacity: 1;
}
.has-dropdown>a:after {
content: "\f054";
font-family: 'FontAwesome';
float: right;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.dropdown {
opacity: 0;
visibility: hidden;
height: 0;
background: rgba(250, 250, 250, 0.1);
}
.dropdown li a {
padding: 6px 10px;
}
.has-dropdown.open-drop>a:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.has-dropdown.open-drop>.dropdown {
opacity: 1;
visibility: visible;
height: auto;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
}
/* -- nav btn collapse -- */
.nav-collapse {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.nav-collapse span {
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
width: 25px;
}
.nav-collapse span:before, .nav-collapse span:after {
content: "";
display: block;
}
.nav-collapse span, .nav-collapse span:before, .nav-collapse span:after {
height: 4px;
background: #10161A;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.nav-collapse span:before {
-webkit-transform: translate(0%, 10px);
-ms-transform: translate(0%, 10px);
transform: translate(0%, 10px);
}
.nav-collapse span:after {
-webkit-transform: translate(0%, -14px);
-ms-transform: translate(0%, -14px);
transform: translate(0%, -14px);
}
#nav.open .nav-collapse span {
background: transparent;
}
#nav.open .nav-collapse span:before {
-webkit-transform: translateY(0px) rotate(-135deg);
-ms-transform: translateY(0px) rotate(-135deg);
transform: translateY(0px) rotate(-135deg);
}
#nav.open .nav-collapse span:after {
-webkit-transform: translateY(-4px) rotate(135deg);
-ms-transform: translateY(-4px) rotate(135deg);
transform: translateY(-4px) rotate(135deg);
}
/*------------------------------------*\
Header
\*------------------------------------*/
header {
position: relative;
}
#home {
height: 100vh;
}
#home .home-wrapper {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.home-content h1 {
text-transform: uppercase;
}
.home-content button {
margin-top: 20px;
}
.header-wrapper h2 {
display: inline-block;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb {
float: right;
background: transparent;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb .breadcrumb-item.active {
color: #868F9B;
}
.breadcrumb>li+li:before {
color: #868F9B;
}

This topic is tagged with "Bootstrap 4", but you are not using the correct syntax for this framework version.
Now, that's a Bootstrap 4 navbar with dropdown:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You are able to study more about it, clicking on here.

I'm trying to change the colour of my dot navigation on a single page site as they move from one section to another using the section id in js

I have found close examples like this stack but they all use exact px to determine the change points. My site is responsive and thus the required change points will not be fixed.
For that reason I thought my best option would be to use the section id tags to determine the change points.
My navigations html:
<div id="nav" class="dotstyle dotstyle-fillup">
<nav>
<ul>
<li class="current">
<a href="#about" class="nav-dot tooltip-effect">
<span class="tooltip-content">
<i>About</i>
</span>
</a>
</li>
<li>
<a href="#services" class="nav-dot tooltip-effect">
<span class="tooltip-content">
<i>Services</i>
</span>
</a>
</li>
<li>
<a href="#service_area" class="nav-dot tooltip-effect">
<span class="tooltip-content tooltip-content-area">
<i>Service Area</i>
</span>
</a>
</li>
<li>
<a href="#gallery" class="nav-dot tooltip-effect">
<span class="tooltip-content">
<i>Gallery</i>
</span>
</a>
</li>
<li>
<a href="#contact" class="nav-dot tooltip-effect">
<span class="tooltip-content">
<i>Contact</i>
</span>
</a>
</li>
</ul>
</nav>
</div><!-- #nav -->
And the css:
#nav {
right: 0px;
height: 100vh;
height: 100%;
position: fixed;
}
#nav nav {
width: 80px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav li {
line-height: 0px;
padding: 24px 20px;
}
.nav-dot {
padding: 0 10px;
border: 2px solid white;
border-radius: 50%;
}
.tooltip-content {
position: absolute;
margin-top: -15px;
letter-spacing: 0.053em;
padding: 14px;
right: 70px;
text-align: center;
border-radius: 14px;
opacity: 0;
cursor: default;
pointer-events: none;
}
.tooltip-content-area {
width: 110px;
}
.tooltip-content i {
opacity: 0;
}
.nav-dot:hover .tooltip-content,
.nav-dot:hover .tooltip-content i {
opacity: 1;
}
.tooltip-effect .tooltip-content {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect .tooltip-content i {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.nav-dot:hover .tooltip-content,
.nav-dot:hover .tooltip-content i {
pointer-events: auto;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.nav-dot.whiteText { /* for the change of .nav-dot colour */
border-color: #1d4166;
}