Develop Reference

How to animate a dashed arrow?

As the title describes, I am trying to animate a dashed arrow. I want it to look as close as possible to this on this site.
I was able to make an arrow although I'm not sure that this was the correct way of making such arrow. I'm assuming I'd have to have drawn it with SVG...
Also the animation looks weird and I don't know how to make it smoother...
I'd appreciate some help guys :)
This is the JsFiddle i made
Here is the code:
body {
margin: 0;
font-size: 16px;
line-height: 1.528571429;
padding: 0;
height: 100%;
}
body #contact {
height: calc(100vh - 40px);
background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
position: absolute;
z-index: 999;
left: 7%;
bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
font-size: 14px;
letter-spacing: 0.25em;
text-align: center;
color: #676565;
text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
position: absolute;
top: 0;
left: 35px;
bottom: 25px;
cursor: pointer;
}
body #contact .to-top-btn-wrapper .to-top-btn .line {
border-right: 0.1rem dashed #676565;
display: inline-block;
animation: show 1000ms linear forwards infinite;
}
body #contact .to-top-btn-wrapper .to-top-btn .arrow {
position: absolute;
top: -0.3rem;
bottom: 0;
height: 1rem;
border-right: 0.1rem solid #676565;
display: inline-block;
}
body #contact .to-top-btn-wrapper .to-top-btn .right {
left: 0.3rem;
transform: rotate(-45deg);
}
body #contact .to-top-btn-wrapper .to-top-btn .left {
right: 0.3rem;
transform: rotate(45deg);
}
#keyframes show {
0% {
height: 5rem;
}
100% {
height: 0rem;
}
}
<section id="contact" class="container-fluid">
<div class="to-top-btn-wrapper">
<div class="btn-text-wrapper">
<span class="btn-text">Scroll to top</span>
</div>
<div class="to-top-btn">
<span class="arrow left"></span>
<span class="line"></span>
<span class="arrow right"></span>
</div>
</div>
</section>

A clip-path animation with some background can do it
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
position: relative;
padding-bottom:4px;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
}
50.1% {
clip-path:polygon(0 0 ,100% 0 ,100% 0 ,0 0);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
A similar idea using mask
.arrow {
width: 20px;
margin:10px;
height: 150px;
padding-bottom:4px;
display:inline-block;
position: relative;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
-webkit-mask:linear-gradient(#fff,#fff);
-webkit-mask-size:100% 0%;
-webkit-mask-repeat:no-repeat;
mask:linear-gradient(#fff,#fff);
mask-size:100% 0%;
mask-repeat:no-repeat;
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:top;
mask-size:100% 100%;
mask-position:top;
}
50.1% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:bottom;
mask-size:100% 100%;
mask-position:bottom;
}
100% {
-webkit-mask-position:bottom;
mask-position:bottom;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Here is a background only solution with no clip-path:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
color: #fff;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom left/10px 10px,
linear-gradient(to bottom right,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom right/10px 10px,
repeating-linear-gradient(currentColor 0 7px, transparent 7px 15px)
bottom/2px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Another version with less gradient:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% 10px,
repeating-linear-gradient(white 0 7px, transparent 0 15px)
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
And with CSS variables to easily control everything:
.arrow {
--h:150px; /* height */
--w:20px; /* width */
--b:7px; /* width of the dash*/
--g:8px; /* gap between dashes*/
width: var(--w);
margin:10px;
height: var(--h);
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% calc(var(--w)/2),
repeating-linear-gradient(white 0 var(--b), transparent 0 calc(var(--b) + var(--g)))
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:var(--h) 0 0;
}
50.1% {
padding:0 0 var(--h);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1);--h:100px;--g:3px;"></div>
<div class="arrow" style="--h:120px;--b:3px;--w:30px"></div>
<div class="arrow" style="transform:scaleY(-1);--h:150px;--b:5px;--g:10px;--w:40px"></div>

toke a different approach to the arrow animation.
you can use SVG instead of text.
POC:
body {
margin: 0;
}
.arrow-container {
padding: 0 50px;
animation: scrolling 2s infinite linear;
overflow: hidden;
height: 150px;
}
.arrow {
animation: scrolling-a 2s infinite linear;
}
.arrow-point {
font-size: 50px;
display: block;
margin: 0 0 -50px -10px;
}
#keyframes scrolling {
0% {
margin-top: 150px;
height: 0;
}
50% {
margin-top: 0;
height: 150px;
}
100% {
margin-top: 0;
height: 0;
}
}
#keyframes scrolling-a {
0% {
margin-top: -150px;
}
50%,
100% {
margin-top: 0;
}
}
<div class="arrow-container">
<div class="arrow">
<span class="arrow-point">^</span><br> |
<br> |
<br> |
<br> |
<br> |
<br> |
<br> |
</div>
</div>

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

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.

Menu to Tap on Mobile

I'm trying to get the following menu to tap on mobile, but can't seem to get it to work. It works on desktop, but I am not sure how to adapt this to have it work when I tap the menu icon on mobile. Not sure if this can be done through css only, or if javascript is required.
/* Body Styles */
body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
header.dark blockquote {
color: #fff;
}
header.light blockquote {
color: #000;
}
blockquote {
max-width: 1000px;
margin: 0 auto;
font-size: 16px;
border-left: 0px;
padding: 20px;
}
blockquote h2 {
padding-right: 40px;
margin: 0px;
}
header.dark blockquote a {
color: orange;
text-decoration: underline;
}
header.light blockquote a {
text-decoration: underline;
}
header {
min-height: 450px;
}
header.dark {
background-color: #444;
}
header.light {
background-color: #fff;
}
/* Navigation Styles */
nav {
position: relative;
}
header.dark nav {
background-color: rgba(255, 255, 255, 0.5);
}
header.light nav {
background-color: rgba(0, 0, 0, 0.5);
}
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav > li {
display: inline-block;
padding: 0;
}
ul.main-nav > li > a {
display: block;
padding: 20px 30px;
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav > li:hover {
background-color: #f9f9f9;
}
ul.main-nav > li:hover > a {
color: #333;
font-weight: 400;
}
ul.main-nav > li ul.sub-menu-lists {
margin: 0px;
padding: 0px;
list-style-type: none;
display: block;
}
ul.main-nav > li ul.sub-menu-lists > li {
padding: 2px 0;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
font-size: 14px;
}
.ic {
position: fixed;
cursor: pointer;
display: inline-block;
right: 25px;
width: 32px;
height: 24px;
text-align: center;
top: 0px;
outline: none;
}
.ic.close {
opacity: 0;
font-size: 0px;
font-weight: 300;
color: #fff;
top: 8px;
height: 40px;
display: block;
outline: none;
}
/* Menu Icons for Devices*/
.ic.menu {
top: 25px;
z-index: 20;
}
.ic.menu .line {
height: 4px;
width: 100%;
display: block;
margin-bottom: 6px;
}
.ic.menu .line-last-child {
margin-bottom: 0px;
}
.sub-menu-head {
margin: 10px 0;
}
.banners-area {
margin-top: 20px;
padding-top: 15px;
}
#media only screen and (max-width:768px) {
.sub-menu-head {
color: orange;
}
.ic.menu {
display: block;
}
header.dark .ic.menu .line {
background-color: #fff;
}
header.light .ic.menu .line {
background-color: #000;
}
.ic.menu .line {
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
.ic.menu:focus .line {
background-color: #fff !important;
}
.ic.menu:focus .line:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ic.menu:focus .line:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: -10px;
}
.ic.menu:focus .line:nth-child(3) {
transform: translateY(15px);
opacity: 0;
}
.ic.menu:focus {
outline: none;
}
.ic.menu:focus ~ .ic.close {
opacity: 1;
z-index: 21;
outline: none;
}
/*
.ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; }
.ic.close:focus { opacity: 0; }
*/
.ic.menu:focus {
opacity: 1;
}
nav {
background-color: transparent;
}
/* Main Menu for Handheld Devices */
ul.main-nav {
z-index: 2;
padding: 50px 0;
position: fixed;
right: 0px;
top: 0px;
width: 0px;
background-color: rgba(0, 0, 0, 1);
height: 100%;
overflow: auto;
/*CSS animation applied : Slide from Right*/
-webkit-transition-property: background, width;
-moz-transition-property: background, width;
-o-transition-property: background, width;
transition-property: background, width;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.ic.menu:focus ~ .main-nav {
width: 300px;
background-color: rgba(0, 0, 0, 1);
}
ul.main-nav > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
.ic.menu:focus ~ .main-nav > * {
opacity: 1;
}
ul.main-nav > li > a:after {
display: none;
}
ul.main-nav > li:first-child {
border-radius: 0px;
}
ul.main-nav > li {
display: block;
border-bottom: 1px solid #444;
}
ul.main-nav > li > a {
font-weight: 600;
}
ul.main-nav > li ul.sub-menu-lists > li a {
color: #eee;
font-size: 14px;
}
.sub-menu-head {
font-size: 16px;
}
ul.main-nav > li:hover {
background-color: transparent;
}
ul.main-nav > li:hover > a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
position: relative;
visibility: visible;
opacity: 1.0;
}
.sub-menu-block {
padding: 0 30px;
}
.banners-area {
padding-bottom: 0px;
}
.banners-area div {
margin-bottom: 15px;
}
.banners-area {
border-top: 1px solid #444;
}
}
#media only screen and (min-width:769px) {
.ic.menu {
display: none;
}
/* Main Menu for Desktop Devices */
ul.main-nav {
display: block;
position: relative;
}
.sub-menu-block {
padding: 15px;
}
/* Sub Menu */
ul.main-nav > li > div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index: 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav > li:hover > div.sub-menu-block {
background-color: #f9f9f9;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav > li:hover > div.sub-menu-block > * {
opacity: 1;
}
.sub-menu-head {
font-size: 20px;
}
/* List Separator: Outer Border */
header.dark ul.main-nav > li > a {
border-right: 1px solid #bbb;
}
header.light ul.main-nav > li > a {
border-right: 1px solid #666;
}
/* List Separator: Inner Border */
ul.main-nav > li > a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
header.dark ul.main-nav > li > a:after {
background-color: #777;
}
header.light ul.main-nav > li > a:after {
background-color: #999;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a.mega-menu > span {
display: block;
vertical-align: middle;
}
ul.main-nav > li > a.mega-menu > span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav > li:hover > a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
.banners-area {
border-top: 1px solid #ccc;
}
}
<!-- Available in two variations: "light" and "dark" | Change <header> class to see impact. -->
<header class="dark">
<nav role="navigation">
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<ul class="main-nav">
<li class="top-level-link">
<a><span>Home</span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>Products</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Clothing</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>New Born</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Handbags</h2>
<ul class="sub-menu-lists">
<li><a>Wallets</a></li>
<li><a>Athletic bag</a></li>
<li><a>Backpack</a></li>
<li><a>Bucket Bag</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Shoes</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>View All</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Services<span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>About</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Company</h2>
<ul class="sub-menu-lists">
<li><a>About</a></li>
<li><a>Mission</a></li>
<li><a>Community</a></li>
<li><a>Team</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Media</h2>
<ul class="sub-menu-lists">
<li><a>News</a></li>
<li><a>Events</a></li>
<li><a>Blog</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Careers</h2>
<ul class="sub-menu-lists">
<li><a>New Opportunities</a></li>
<li><a>Life # Company</a></li>
<li><a>Why Join Us?</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Contact</span></a>
</li>
</ul>
</nav>
</header>

i think you can do it with css, if you add:
cursor: pointer;
to the css for your menu button

Need help to make Polygon Navigation style with transitions

Can anyone please help me to make my Polygon navigation more accurate on different browsers because it works on Chrome but looks ugly on Firefox no support for IE also. Can anyone please help me add some jQuery / css3 code to make it work in at least Chrome & Firefox. suggest some code to make it better .. Thank You !
HTML Markup :
<div id="left_rot"></div>
<div id="str"></div>
<div id="right_rot"></div>
<div id="nav">
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span>
<span class="close">Close</span> Menu</label>
<span class="link1">Link1</span>
<span class="link2">Link2</span>
<span class="link3">link3</span>
<span class="link4">link4</span>
<span class="link5">link5</span>
<span class="link6">link6</span>
</div>
fiddle link for css : http://jsfiddle.net/thekiddev/d8MLQ/

I have work on your project, and changed 2 things.
I have changed your HTML, mainly to change the classes link1, link2, and so, to class link and ids link1 link2 link3.. That makes for a more compact code, since I can set shared properties for all the links.
Also, I have changed the way you position your triangles. Instead of setting positions for every one of them with top and left, I position all of them the same way. And then, I rotate them with the rotation center in the lower vertix of the triangle. That makes positioning them much easier.
The modified HTML is
<div id="nav">
<!-- Option for Opening or Closing menu -->
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label>
<!-- Links -->
<span class="link" id="link1">Link1</span>
<span class="link" id="link2">Link2</span>
<span class="link" id="link3">link3</span>
<span class="link" id="link4">link4</span>
<span class="link" id="link5">link5</span>
<span class="link" id="link6">link6</span>
</div>
And the CSS is
* {
margin: 0;
padding: 0;
}
body {
background:#3498DB;
}
#nav {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 350px auto;
position: absolute;
text-align:center;
}
#left_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#right_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top:0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#str {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
text-align: center;
}
span {
z-index:555 !important;
}
span a {
}
span a:hover {
background:rgba(0, 0, 0, .1);
box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
margin-left: -80px;
top:-142px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
text-align:center;
background:transparent;
color:#fff !important;
padding: 0px;
position:absolute;
text-shadow:0 2px 1px rgba(0, 0, 0, .2);
-webkit-transition: all ease 0.50s;
transition: all ease 0.50s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
height: 140px;
width: 162px;
}
#link2 a {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#link3 a {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
#link4 a {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#link5 a {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
#link6 a {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.link a:before {
position: absolute;
content:'';
width:0;
height:0;
top:0;
left:0;
border-style:solid;
border-width: 140px 81px 0px 81px;
border-color:transparent;
border-top-color: #fff;
margin:0px;
z-index:5;
-webkit-transition: all 0.55s linear;
transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
border-top-color: #ECF0F1;
}
.chkbx {
display: none;
margin: 0px auto;
}
.pin {
display: block;
width: 200px;
padding: 10px 25px;
font-family: century gothic;
background:rgba(252, 252, 252, 1);
position: fixed;
top: -300px;
left: 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: #666;
position: relative;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.chkbx:checked ~ .pin {
color: #fff;
background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
border-color: transparent !important;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.close {
display: none;
}
.chkbx:checked ~ .pin span.close {
display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
display: none !important;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
footer h2, p {
font-family: century gothic;
color: #fefefe;
}
footer p a {
text-decoration: none;
font-weight: bold;
color: #1f2f3f;
}
fiddle
I have remover prefixed properties that aren't needed in modern browsers to keep the example short. It works ok in latest Chrom, Firefox and IE.