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>

List Item not displaying correctly

My 4th list item "Contact" is not lining up with the rest of the list items.
The 4th list item contains a few divs and additional styling to create a button that displays my contact information as opposed to redirecting to a different section as the other list items do.
I've tried messing with padding but it messes up when I use a smaller viewport.
Does anyone have any ideas why this is happening?
.popup {
width: 350px;
height: 280px;
padding: 30px 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-sizing: border-box;
z-index: 2;
text-align: center;
opacity: 0;
top: -200%;
transform: translate(-50%, -50%) scale(0.5);
transition: opacity 300ms ease-in-out, top 1000ms ease-in-out transform 1000ms ease-in-out;
}
.popup.active {
display: inline-block;
opacity: 1;
top: 500%;
right: 20%;
transform: translate(-50%, -50%) scale(1);
transition: transform 300ms cubic-bezier(0.18, 0.89, 0.43, 1.19);
}
.popup .icon {
margin: 5px;
width: 50px;
height: 50px;
border: 2px solid #000000;
text-align: center;
display: inline-block;
border-radius: 50%;
line-height: 60px;
}
.popup .icon i.fa-solid {
font-size: 30px;
color: #3a86ff;
}
.popup .title {
margin: 5px 0px;
font-size: 30px;
font-weight: 600;
}
.popup .description {
color: #222;
font-size: 15px;
padding: 5px;
}
.popup .dismiss-btn {
margin-top: 15px;
}
.popup .dismiss-btn button {
padding: 10px 20px;
background: #111;
color: #f5f5f5;
border: 2px solid #111;
font-size: 16px;
font-weight: 600;
outline: none;
border-radius: 10px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.popup .dismiss-btn button:hover {
color: #111;
background: #f5f5f5;
}
.popup>div {
position: relative;
top: 10px;
opacity: 0;
}
.popup.active>div {
top: 0px;
opacity: 1;
}
.popup.active .icon {
transition: all 300ms ease-in-out 250ms;
}
.popup.active .title {
transition: all 300ms ease-in-out 300ms;
}
.popup.active .description {
transition: all 300ms ease-in-out 350ms;
}
.popup.active .dismiss-btn {
transition: all 300ms ease-in-out 400ms;
}
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class='container-fluid'>
<a class="navbar-brand" href="#">Ben</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 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#Skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<!-- Button Contact modal -->
<li class="nav-item">
<div class="popup center">
<div class="icon">
<i class="fa-solid fa-address-card"></i>
</div>
<div class="title">Contact</div>
<div class="description">
<p>Email: Pavlovichben#gmail.com </p>
<p>Phone: (224) 456-2817</p>
</div>
<div class="dismiss-btn">
<button id="dismiss-popup-btn">Dismiss</button>
</div>
</div>
<div class="center">
<a class='nav-link' id="open-popup-btn">Contact</a>
</div>
</li>
</ul>
</div>
</div>
</nav>

Activate class on div click

I found some interesting program that creates a card and then turn it backwards when hover and here is the css.
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
background: #eee !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #108d6f;
border-color: #108d6f;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #007b5e;
border-color: #007b5e;
}
section {
padding: 60px 0;
}
section .section-title {
text-align: center;
color: #007b5e;
margin-bottom: 50px;
text-transform: uppercase;
}
#team .card {
border: none;
background: #ffffff;
}
.image-flip:hover .backside,
.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.frontside {
position: relative;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
margin-bottom: 30px;
}
.backside {
position: absolute;
top: 0;
left: 0;
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,
.backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
}
.frontside .card,
.backside .card {
min-height: 312px;
}
.backside .card a {
font-size: 18px;
color: #007b5e !important;
}
.frontside .card .card-title,
.backside .card .card-title {
color: #007b5e !important;
}
.frontside .card .card-body img {
width: 120px;
height: 120px;
border-radius: 50%;
}
and this is the part of the html where the css works.
<section id="team" class="pb-5">
<div class="container">
<h5 class="section-title h1">OUR TEAM</h5>
<div class="row">
</div>
<div class="row">
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p>
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
</section>
my question is how can i activate the class that turns the div backwards on div click?
I mean when the div is in forward look and i clicked it it will turn backward and when i click the div again it will turn at front.
I tried many changes but still not work thnx

Change all the hover properties to a new class and use jquery toggleClass method to add and remove the class on click. Because :hover property will get triggered when you place your mouse over that element. If you want it on clicking, then you have to bind the hovering action to click action.
In the provided example i have created new class with hovering properties and gave to the click action.
$(document).ready(function()
{
$('.image-flip').click(function()
{
$(this).toggleClass('image-fliper');
});
});
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
background: #eee !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #108d6f;
border-color: #108d6f;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #007b5e;
border-color: #007b5e;
}
section {
padding: 60px 0;
}
section .section-title {
text-align: center;
color: #007b5e;
margin-bottom: 50px;
text-transform: uppercase;
}
#team .card {
border: none;
background: #ffffff;
}
.image-fliper .backside,
.image-fliper .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-fliper .frontside,
.image-fliper .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.frontside {
position: relative;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
margin-bottom: 30px;
}
.backside {
position: absolute;
top: 0;
left: 0;
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,
.backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
}
.frontside .card,
.backside .card {
min-height: 312px;
}
.backside .card a {
font-size: 18px;
color: #007b5e !important;
}
.frontside .card .card-title,
.backside .card .card-title {
color: #007b5e !important;
}
.frontside .card .card-body img {
width: 120px;
height: 120px;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="team" class="pb-5">
<div class="container">
<h5 class="section-title h1">OUR TEAM</h5>
<div class="row">
</div>
<div class="row">
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p>
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
background: #eee !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #108d6f;
border-color: #108d6f;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #007b5e;
border-color: #007b5e;
}
section {
padding: 60px 0;
}
section .section-title {
text-align: center;
color: #007b5e;
margin-bottom: 50px;
text-transform: uppercase;
}
#team .card {
border: none;
background: #ffffff;
}
/*
.mainflip:hover .backside,
.image-flip:hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.mainflip:hover .frontside,
.mainflip:hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}*/
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
margin:15px;
display:inline-block
}
input[type="checkbox"]{
opacity:0
}
input[type="checkbox"]:checked+label .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
input[type="checkbox"]:checked+label .frontside{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.frontside {
position: relative;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
margin-bottom: 30px;
}
.backside {
position: absolute;
top: 0;
left: 0;
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,
.backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
}
.frontside .card,
.backside .card {
min-height: 312px;
}
.backside .card a {
font-size: 18px;
color: #007b5e !important;
}
.frontside .card .card-title,
.backside .card .card-title {
color: #007b5e !important;
}
.frontside .card .card-body img {
width: 120px;
height: 120px;
border-radius: 50%;
}
<input id="activeClas" name="activeClas" type="checkbox"/>
<label for="activeClas" class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_02.png" alt="card image"></p>
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">Sunlimetech</h4>
<p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</label>
This is without any JS, and hope as per your requirement. when the div is in forward look and i clicked it it will turn backward and when i click the div again it will turn at front. Its working fine for me, If not as per you want , pls let know.

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;
}