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>

Nested drop down menu using w3schools method

I had designed a menu using this link.
Now I have problem on using nested drop down links.
I had treid several ways but because I'm not using standard ul and li tags now I have problem to fix this issue.
Here I will copy my code so you can see what I'm doing and also I had attached some screenshots.
jQuery(".search-form-header-icon").click(function () {
jQuery(".header-search-form-input").toggle('fast', function () {
if (jQuery(this).css("display") == "block")
jQuery(this).css('display','inline-block');
});
});
jQuery(window).on('scroll', function () {
var s = jQuery(window).scrollTop(),
d = jQuery(document).height(),
c = jQuery(window).height();
var scrollPercent = (s / (d - c)) * 100;
var pagePercent = Math.round(scrollPercent)
var gradient_bar_header_width = pagePercent + "%"
jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Header Redesigned */
.gradient-bar-header {
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
height: 3px;
background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}
header {
background-color: #F8F9FA;
}
.topnav {
overflow: hidden;
background-color: #F8F9FA;
padding-bottom: 20px;
}
.topnav a {
padding: 12px;
float: right;
display: block;
color: #343a40;
text-align: center;
padding: 8px 10px 8px 10px;
text-decoration: none;
font-size: 1em;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropbtn i {
padding-left: 6px;
}
.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
color: #343a40;
padding: 0px 10px 0px 10px !important;
background-color: inherit;
font-family: inherit;
margin: 0;
box-shadow: unset !important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #DFE0E1;
color: #343a40;
text-decoration: none;
}
.dropdown-content a {
text-align: right;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.header-social-div a {
font-size: 20px;
color: #808080;
padding: 7px;
}
.header-cta-div {
display: flex;
}
.search-form-header-icon {
color: grey;
font-size: 1.5em;
vertical-align: middle;
margin-left: 4px;
}
.header-search-form-input{
background: white !important;
border-radius: 3px !important;
font-family: inherit !important;
border-style: solid !important;
border-width: 1px !important;
border-color: grey !important;
font-size: 1em !important;
padding-right: 5px !important;
display: none;
background-color: white !important;
line-height: unset !important;
height: unset !important;
width: unset !important;
}
#media screen and (min-width: 991px) {
.search-form-header-icon {
margin-right: 20px;
}
.header-search-form {
display: contents;
}
.header-cta-div {
float: left;
margin-left: 5px;
}
.topnav {
max-width: 90%;
margin: auto;
padding-top: 13px;
}
.header-phone-div {
text-align: right;
}
.header-social-div {
text-align: left;
}
.Logo-header {
background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: -17px 0px 6px 13px;
}
.dropbtn, .topnav a:hover {
border-radius: 5px;
}
.dropdown-content a:hover {
border-radius: 0px;
}
}
#media screen and (max-width: 990px) {
.header-search-form {
display: block;
margin-top: 20px;
}
.search-form-header-icon {
margin-right: 20px;
}
.Logo-header {
width: 170px;
height: 60px;
background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
background-repeat: no-repeat;
margin: -5px 0px 6px 13px;
}
.header-cta-div {
width: 100%;
}
.header-cta-div a {
display: block !important;
margin: auto;
min-width: 40%;
}
.header-phone-div, .header-social-div {
text-align: center;
}
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: left;
display: block;
font-size: 1.5em;
margin-left: 15px;
}
.topnav a.icon:hover {
background-color: unset;
}
.Logo-header {
display: block !important;
}
.topnav {
padding-top: 13px;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
.links-header-menu {
background: #f1f1f1;
margin-bottom: 15px;
line-height: 2em;
}
}
#media screen and (max-width: 575px) {
.header-mini-nav {
max-width: 90%;
}
}
.dropdown {
position: unset !important;
}
.Logo-header {
vertical-align: middle;
}
.Logo-header:hover {
background-color: unset !important;
color: unset !important;
}
.header-mini-nav {
background: #f1f1f1;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #dedede;
border-top: unset;
padding-bottom: 10px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.header-phone-div, .header-social-div {
padding-top: 14px;
font-size: 14px;
}
.header-phone-number {
color: #343a40;
text-decoration: none;
background: #0b87ce;
padding: 10px;
border-radius: 13px;
color: white;
vertical-align: middle;
}
.header-phone-number:hover {
background: #013495;
color: white;
text-decoration: none;
}
.header-cta-a {
margin-right: 10px;
border-style: solid;
border-width: 2px;
border-color: #0b87ce;
color: #0b87ce !important;
padding: 4px 12px 4px 12px !important;
border-radius: 5px !important;
}
.header-cta-a:hover {
color: white !important;
background-color: #0b87ce !important;
}
.header-cta-a i {
vertical-align: middle;
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.hvr-wobble-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
-webkit-animation-name: hvr-wobble-horizontal;
animation-name: hvr-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Icon Bounce */
.hvr-icon-bounce {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-bounce .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* Icon Rotate */
.hvr-icon-rotate {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-rotate .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=10, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="gradient-bar-header"></div>
<header>
<div class="container header-mini-nav">
<div class="row">
<div class="col-sm-12 col-lg-6 header-phone-div">
<a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
<i class="fas fa-search search-form-header-icon"></i>
<form action="/" method="get" class="header-search-form">
<input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
</form>
</div>
<div class="col-sm-12 col-lg-6 header-social-div">
<a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-telegram telegram-icon"></i></a>
<a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
class="fab fa-instagram instagram-icon"></i></a>
<a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
class="fab fa-facebook-square facebook-icon"></i></a>
<a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-linkedin linkedin-icon"></i></a>
<a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
class="fab fa-twitter-square twitter-icon"></i></a>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
<div class="links-header-menu">
<!--خانه-->
پی پال
مستر کارت
آزمون های بین المللی
پرداخت های ارزی
پرداخت های سفارت
درباره ما
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
</button>
<div class="dropdown-content">
<i class="fas fa-angle-left"></i> Link 1
<i class="fas fa-angle-left"></i> Link 2
<i class="fas fa-angle-left"></i> Link 3
</div>
</div>
☰
</div>
<div class="header-cta-div">
<a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
class="fas fa-sign-in-alt"></i> ورود</a>
<a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
</div>
</div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="header.js"></script>
</body>
</html>
Now it looks like this:
I want to be like this one:
How can I add nested menu items?

Talking about nested drop-downs, consider using nested lists.
Here you go!. I just wrapped the <a> inside the dropdown-content into a list item.
Try this.
jQuery(".search-form-header-icon").click(function () {
jQuery(".header-search-form-input").toggle('fast', function () {
if (jQuery(this).css("display") == "block")
jQuery(this).css('display','inline-block');
});
});
jQuery(window).on('scroll', function () {
var s = jQuery(window).scrollTop(),
d = jQuery(document).height(),
c = jQuery(window).height();
var scrollPercent = (s / (d - c)) * 100;
var pagePercent = Math.round(scrollPercent)
var gradient_bar_header_width = pagePercent + "%"
jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Header Redesigned */
.gradient-bar-header {
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
height: 3px;
background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}
header {
background-color: #F8F9FA;
}
.topnav {
overflow: hidden;
background-color: #F8F9FA;
padding-bottom: 20px;
}
.topnav a {
padding: 12px;
float: right;
display: block;
color: #343a40;
text-align: center;
padding: 8px 10px 8px 10px;
text-decoration: none;
font-size: 1em;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropbtn i {
padding-left: 6px;
}
.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
color: #343a40;
padding: 0px 10px 0px 10px !important;
background-color: inherit;
font-family: inherit;
margin: 0;
box-shadow: unset !important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow-y: auto;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #DFE0E1;
color: #343a40;
text-decoration: none;
}
.dropdown-content a {
text-align: right;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.header-social-div a {
font-size: 20px;
color: #808080;
padding: 7px;
}
.header-cta-div {
display: flex;
}
.search-form-header-icon {
color: grey;
font-size: 1.5em;
vertical-align: middle;
margin-left: 4px;
}
.header-search-form-input{
background: white !important;
border-radius: 3px !important;
font-family: inherit !important;
border-style: solid !important;
border-width: 1px !important;
border-color: grey !important;
font-size: 1em !important;
padding-right: 5px !important;
display: none;
background-color: white !important;
line-height: unset !important;
height: unset !important;
width: unset !important;
}
#media screen and (min-width: 991px) {
.search-form-header-icon {
margin-right: 20px;
}
.header-search-form {
display: contents;
}
.header-cta-div {
float: left;
margin-left: 5px;
}
.topnav {
max-width: 90%;
margin: auto;
padding-top: 13px;
}
.header-phone-div {
text-align: right;
}
.header-social-div {
text-align: left;
}
.Logo-header {
background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: -17px 0px 6px 13px;
}
.dropbtn, .topnav a:hover {
border-radius: 5px;
}
.dropdown-content a:hover {
border-radius: 0px;
}
}
#media screen and (max-width: 990px) {
.header-search-form {
display: block;
margin-top: 20px;
}
.search-form-header-icon {
margin-right: 20px;
}
.Logo-header {
width: 170px;
height: 60px;
background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
background-repeat: no-repeat;
margin: -5px 0px 6px 13px;
}
.header-cta-div {
width: 100%;
}
.header-cta-div a {
display: block !important;
margin: auto;
min-width: 40%;
}
.header-phone-div, .header-social-div {
text-align: center;
}
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: left;
display: block;
font-size: 1.5em;
margin-left: 15px;
}
.topnav a.icon:hover {
background-color: unset;
}
.Logo-header {
display: block !important;
}
.topnav {
padding-top: 13px;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
.links-header-menu {
background: #f1f1f1;
margin-bottom: 15px;
line-height: 2em;
}
}
#media screen and (max-width: 575px) {
.header-mini-nav {
max-width: 90%;
}
}
.dropdown {
position: unset !important;
}
.Logo-header {
vertical-align: middle;
}
.Logo-header:hover {
background-color: unset !important;
color: unset !important;
}
.header-mini-nav {
background: #f1f1f1;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #dedede;
border-top: unset;
padding-bottom: 10px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.header-phone-div, .header-social-div {
padding-top: 14px;
font-size: 14px;
}
.header-phone-number {
color: #343a40;
text-decoration: none;
background: #0b87ce;
padding: 10px;
border-radius: 13px;
color: white;
vertical-align: middle;
}
.header-phone-number:hover {
background: #013495;
color: white;
text-decoration: none;
}
.header-cta-a {
margin-right: 10px;
border-style: solid;
border-width: 2px;
border-color: #0b87ce;
color: #0b87ce !important;
padding: 4px 12px 4px 12px !important;
border-radius: 5px !important;
}
.header-cta-a:hover {
color: white !important;
background-color: #0b87ce !important;
}
.header-cta-a i {
vertical-align: middle;
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes hvr-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.hvr-wobble-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
-webkit-animation-name: hvr-wobble-horizontal;
animation-name: hvr-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Icon Bounce */
.hvr-icon-bounce {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-bounce .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* Icon Rotate */
.hvr-icon-rotate {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-rotate .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
li{list-style:none;}
.dropdown-content ul li {position:relative;}
.dropdown-content ul li ul{display:none; margin-left:35px; background:#fff; box-shadow:0 0 3px 0 rgba(0,0,0,0.3);z-index:99; padding:15px; border-radius:3px; width:170px; margin-left:auto; margin-right:auto;position: absolute; left: 110px; top: 0;}
.dropdown-content ul li:hover ul {display:block;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=10, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="gradient-bar-header"></div>
<header>
<div class="container header-mini-nav">
<div class="row">
<div class="col-sm-12 col-lg-6 header-phone-div">
<a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
<i class="fas fa-search search-form-header-icon"></i>
<form action="/" method="get" class="header-search-form">
<input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
</form>
</div>
<div class="col-sm-12 col-lg-6 header-social-div">
<a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-telegram telegram-icon"></i></a>
<a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
class="fab fa-instagram instagram-icon"></i></a>
<a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
class="fab fa-facebook-square facebook-icon"></i></a>
<a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
class="fab fa-linkedin linkedin-icon"></i></a>
<a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
class="fab fa-twitter-square twitter-icon"></i></a>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
<div class="links-header-menu">
<!--خانه-->
پی پال
مستر کارت
آزمون های بین المللی
پرداخت های ارزی
پرداخت های سفارت
درباره ما
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
</button>
<div class="dropdown-content">
<ul> <li><i class="fas fa-angle-left"></i> Link 1
<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li>
<li> <i class="fas fa-angle-left"></i> Link 2<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li>
<li> <i class="fas fa-angle-left"></i> Link 3<ul><li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul></li></ul>
</div>
</div>
☰
</div>
<div class="header-cta-div">
<a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
class="fas fa-sign-in-alt"></i> ورود</a>
<a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
</div>
</div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="header.js"></script>
</body>
</html>
Also a live codepen example to playaround : https://codepen.io/Ev1tw1n/pen/OrOxQE

You can try the code here used from w3schools:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Here is the link to try it in the editor. I hope this helps you.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Bootstrap 4 nav collapsing animation stopping for a split second when opening, ok closing

When you expand the menu it slides down, stops for a split second and the continues. Sliding back up seems to be fine though but not as smooth when opening.
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
width: 50%;
margin: 0 auto;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

I saw a lot of unnecessary absolute positioning, both to have items fill the screen and be centered in other elements. This was preventing Bootstrap's toggle JS from properly recognizing what the height of the expanding element should be.
Instead of having the .navbar-collapse absolute positioned to always take up your window, the content inside of it should be the height of your window - I used height: 100vh on .navbar-nav to do this.
Additionally, since .navbar-nav is already a display: flex element in Bootstrap, I removed your absolute positioning from it and added justify-content: center to vertically center the list elements in it.
Here's a diff of my changes to your CSS (yours on the left):
And working example below:
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
height: 100vh;
justify-content: center;
width: 50%;
margin: 0 auto;
text-align: center;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.

change CSS to work with jQuery toggle

Weave: http://kodeweave.sourceforge.net/editor/#e3d0eadc38078efe27c7785d6e4a6e1a
I'm having a floating action button (material design style) on my site. Currently it is triggered by the :hover property and plain CSS. I want to change it to open on click and was planning to use the toggle function of jQuery.
I'm trying to replicate the menu from mydivision.net (bottom right corner)
$(document).ready(function() {
$("span#fab").click(function () {
$(this).toggleClass("active");
});
});
.fab {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 10;
}
.fab-button {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-align: center;
}
.fab-button:active,
.fab-button:focus,
.fab-button:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56);
}
.fab-button:not(:last-child) {
width: 42px;
height: 42px;
margin: 10px auto 0;
opacity: 0;
-webkit-transform: translateY(50px) scale(0.2);
transform: translateY(50px) scale(0.2);
}
.fab:hover .fab-button:not(:last-child) {
opacity: 1;
-webkit-transform: none;
transform: none;
margin: 15px auto 0;
}
.fab-button i {
color: #fff;
font-size: 21px;
text-align: center;
line-height: 42px;
}
.fab-button:nth-last-child(1) i {
line-height: 56px;
}
.fab-button:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms;
background-color: #ff6d10;
cursor: pointer;
}
.fab-button:not(:last-child):nth-last-child(2) {
-webkit-transition-delay: 50ms;
transition-delay: 50ms;
background-color: #78c831;
}
.fab-button:not(:last-child):nth-last-child(3) {
-webkit-transition-delay: 75ms;
transition-delay: 75ms;
background-color: #3f73fc;
}
.fab-button:not(:last-child):nth-last-child(4) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
background-color: #6d5593;
}
.fab-button:not(:last-child):nth-last-child(5) {
-webkit-transition-delay: 125ms;
transition-delay: 125ms;
background-color: #f8ba24;
}
.fab-button:not(:last-child):nth-last-child(6) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
background-color: #1fc36a;
}
.fab-button:not(:last-child):nth-last-child(7) {
-webkit-transition-delay: 175ms;
transition-delay: 175ms;
background-color: #242424;
}
.fab .fab-button:nth-last-child(1) i {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fab:hover .fab-button:nth-last-child(1) i {
transform: rotate(-180deg);
}
[tooltip]:before {
position: absolute;
bottom: 22%;
right: 100%;
border-radius: 3px;
background-color: #242424;
color: #fff;
content: attr(tooltip);
font-size: 12px;
line-height: 1;
padding: 5px;
margin-right: 10px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
background-color: #000;
}
.fab:hover [tooltip]:before,
.fab:hover [tooltip]:after {
visibility: visible;
opacity: 1;
}
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="fab">
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a>
<a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a>
<span class="fab-button" id="fab"><i class="fa fa-bars"></i></span>
</nav>
I thought I could use the following jQuery script:
jQuery(document).ready(function() {
jQuery("span#fab").click(function () {
jQuery(this).toggleClass("active");
});
});
Now the question is: How do I have to amend the existing CSS so that the new class "active" is opening the menu on click?
Thanks!

Weave: http://kodeweave.sourceforge.net/editor/#e884e37313af26b5738f11b2446bfb20
The menu opens from :hover. If you use the :active pseudo selector you will have to hold your mouse down for the menu to be open (In short :active is basically a mousedown/touchstart event in CSS)
You don't actually need JQuery for this effect! You could open/close the menu using a checkbox or the :target pseudo selector.
I chose to use a checkbox in my snippet below.
I removed some of the vendor prefixes in your CSS and replaced it with Prefix-Free to keep your code DRY.
.fab {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 10;
}
.fab-button {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
transition: all 0.2s ease-out;
text-align: center;
}
#menu:checked,
.fab-button:active,
.fab-button:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56);
}
.fab-button:not(:last-child) {
width: 42px;
height: 42px;
margin: 10px auto 0;
opacity: 0;
transform: translateY(50px) scale(0.2);
}
#menu:checked ~ .fab-button:not(:last-child) {
opacity: 1;
transform: none;
margin: 15px auto 0;
}
.fab-button i {
color: #fff;
font-size: 21px;
text-align: center;
line-height: 42px;
}
.fab-button:nth-last-child(1) i {
line-height: 56px;
}
.fab-button:nth-last-child(1) {
transition-delay: 25ms;
background: #ff6d10;
cursor: pointer;
}
.fab-button:not(:last-child):nth-last-child(2) {
transition-delay: 50ms;
background: #78c831;
}
.fab-button:not(:last-child):nth-last-child(3) {
transition-delay: 75ms;
background: #3f73fc;
}
.fab-button:not(:last-child):nth-last-child(4) {
transition-delay: 100ms;
background: #6d5593;
}
.fab-button:not(:last-child):nth-last-child(5) {
transition-delay: 125ms;
background: #f8ba24;
}
.fab-button:not(:last-child):nth-last-child(6) {
transition-delay: 150ms;
background: #1fc36a;
}
.fab-button:not(:last-child):nth-last-child(7) {
transition-delay: 175ms;
background: #242424;
}
.fab .fab-button:nth-last-child(1) i {
transition: all 0.2s ease;
}
#menu:checked ~ .fab-button:nth-last-child(1) i {
transform: rotate(-180deg);
}
[tooltip]:before {
position: absolute;
bottom: 22%;
right: 100%;
border-radius: 3px;
background: #242424;
color: #fff;
content: attr(tooltip);
font-size: 12px;
line-height: 1;
padding: 5px;
margin-right: 10px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
background: #000;
}
#menu:checked ~ [tooltip]:before,
#menu:checked ~ [tooltip]:after {
visibility: visible;
opacity: 1;
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>
<nav class="fab">
<input type="checkbox" id="menu">
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a>
<a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a>
<a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a>
<label for="menu" class="fab-button" id="fab"><i class="fa fa-bars"></i></label>
</nav>

This line is where the party's at .fab:hover .fab-button:not(:last-child) {opacity: 1; -webkit-transform: none; transform: none; margin: 15px auto 0;}
So you need to change fab:hover to fab.active on this line and wherever else it occurs.