var screansize = $(window).width();
$(".search-form-header-icon").click(function () {
$(".header-search-form-input").toggle('fast', function () {
if ($(this).css("display") == "block") {
$(this).css('display', 'inline-block');
}
});
});
$(window).on('scroll', function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrollPercent = (s / (d - c)) * 100;
var pagePercent = Math.round(scrollPercent)
var gradient_bar_header_width = pagePercent + "%"
$(".gradient-bar-header").css("width", gradient_bar_header_width);
});
if (screansize > 900) {
$(document).ready(function () {
$('.dropdown-content #first_drop_one').on('mouseover', function () {
$(this).find('ul').css("display", "block");
}).on('mouseout', function () {
$(this).find('ul').css("display", "none");
})
$('.dropdown-content #second_drop_one').on('mouseover', function () {
$(this).find('ul').css("display", "block");
}).on('mouseout', function () {
$(this).find('ul').css("display", "none");
})
});
}
if (screansize < 900) {
$(".dropdown-submenu").click(function () {
$(this).find(".dropdown-menu").toggle('fast', function () {
if ($(this).css("display") == "block")
$(this).css('display', 'contents');
});
});
}
$(document).ready(function menu_function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
);
if (screansize > 900) {
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)
if (pagePercent > 7) {
jQuery("#myTopnav").addClass("fixHeader-desktop");
jQuery('.dropdown-content').css('position', 'fixed ');
jQuery('.Logo-header').css('display', 'none');
}
if (pagePercent < 4) {
jQuery("#myTopnav").removeClass("fixHeader-desktop");
jQuery('.dropdown-content').css('position', 'absolute');
jQuery('.Logo-header').css('display', 'block');
}
});
}
/* 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;
}
.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/uploads/2017/10/NikpardakhtLogo-New.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/NikpardakhtLogo-New-mob.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 {
text-decoration: none;
background: #0b87ce;
padding: 10px;
border-radius: 13px;
color: white;
vertical-align: middle;
letter-spacing: 3px;
}
.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);
}
.dropdown-submenu {
position: relative;
display: block;
}
.dropdown-menu{
width: 100% !important;
}
.dropdown-submenu .dropdown-menu {
top: 0px;
right: 100%;
margin-right: 2px;
}
.dropdown-content a i{
margin-left: 5px;
}
/*Fix Header Styles*/
.fixHeader-desktop{
position: fixed;
z-index: 9999;
min-width: 100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-top: unset;
border-left: unset;
border-right: unset;
border-width: 1px;
border-color: #2c87ce;
}
<!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="جست و جو">
</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">
<a href="https://nikpardakht.com" class="Logo-header"></a>
<div class="links-header-menu">
<!--<a href="#home" class="active">خانه</a>-->
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>پی پال</button>
<div class="dropdown-content">
<a href="https://nikpardakht.com/%d9%be%db%8c-%d9%be%d8%a7%d9%84/"><i class="fas fa-angle-left"></i>تمام خدمات پی پال</a>
<a href="https://nikpardakht.com/%d9%be%db%8c-%d9%be%d8%a7%d9%84/%d8%b4%d8%a7%d8%b1%da%98-%d8%ad%d8%b3%d8%a7%d8%a8-%d9%be%db%8c-%d9%be%d8%a7%d9%84/"><i class="fas fa-angle-left"></i>شارژ پی پال</a>
<a href="https://nikpardakht.com/%d9%be%db%8c-%d9%be%d8%a7%d9%84/%d8%a7%d9%81%d8%aa%d8%aa%d8%a7%d8%ad-%d8%ad%d8%b3%d8%a7%d8%a8-%d9%be%db%8c-%d9%be%d8%a7%d9%84/"><i class="fas fa-angle-left"></i>افتتاح حساب پی پال</a>
<a href="https://nikpardakht.com/%d9%be%db%8c-%d9%be%d8%a7%d9%84/%d9%be%d8%b1%d8%af%d8%a7%d8%ae%d8%aa-%d8%ae%d8%b1%db%8c%d8%af-%d8%a8%d8%a7-%d9%be%db%8c-%d9%be%d8%a7%d9%84/"><i class="fas fa-angle-left"></i>پرداخت با پی پال</a>
<a href="https://nikpardakht.com/foreign-income-exchange/"><i class="fas fa-angle-left"></i>نقد کردن پی پال</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>مستر کارت</button>
<div class="dropdown-content">
<a href="https://nikpardakht.com/%d9%85%d8%b3%d8%aa%d8%b1-%da%a9%d8%a7%d8%b1%d8%aa/"><i class="fas fa-angle-left"></i>مقایسه و خرید مستر کارت</a>
<a href="https://nikpardakht.com/%d9%85%d8%b3%d8%aa%d8%b1-%da%a9%d8%a7%d8%b1%d8%aa/%d9%85%d8%b3%d8%aa%d8%b1-%da%a9%d8%a7%d8%b1%d8%aa-%d8%aa%d8%b1%d8%a7%d9%88%d9%84-%d8%a8%db%8c-%d9%86%d8%a7%d9%85/"><i class="fas fa-angle-left"></i>مستر کارت تراول پلاس</a>
<a href="https://nikpardakht.com/%d9%85%d8%b3%d8%aa%d8%b1-%da%a9%d8%a7%d8%b1%d8%aa/mastercard-virtual/"><i class="fas fa-angle-left"></i>مستر کارت مجازی</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>پرداخت های دانشجویی</button>
<div class="dropdown-content">
<li id="first_drop_one" class="dropdown-submenu">
<a class="submenu-new-one" tabindex="-1"><i class="fas fa-angle-left"></i>پرداخت آزمون های بین المللی<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="https://nikpardakht.com/%d9%be%d8%b1%d8%af%d8%a7%d8%ae%d8%aa-%d9%87%d8%b2%db%8c%d9%86%d9%87-%d8%a2%d8%b2%d9%85%d9%88%d9%86-%d9%87%d8%a7%db%8c-%d8%a8%db%8c%d9%86-%d8%a7%d9%84%d9%85%d9%84%d9%84%db%8c/">پرداخت آزمون های بین المللی در یک نگاه</a></li>
<li><a tabindex="-1" href="https://nikpardakht.com/toefl/">TEOFL</a></li>
<li><a tabindex="-1" href="https://nikpardakht.com/ielts/">IELTS</a></li>
</ul>
</li>
<li id="second_drop_one" class="dropdown-submenu">
<a class="submenu-new-one" tabindex="-1"><i class="fas fa-angle-left"></i>پرداخت های دانشجویی<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="https://nikpardakht.com/wes/">پرداخت هزینه WES</a></li>
</ul>
</li>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i>پرداخت های ارزی ویژه</button>
<div class="dropdown-content">
<a href="https://nikpardakht.com/special-services-for-hostings/"><i class="fas fa-angle-left"></i>پرداخت برای شرکت های هاستینگ</a>
<a href="https://nikpardakht.com/hosting-payment/"><i class="fas fa-angle-left"></i>پرداخت خدمات هاستینگ و سرور</a>
<a href="https://nikpardakht.com/residence/"><i class="fas fa-angle-left"></i>پرداخت های سفارت و اقامت</a>
</div>
</div>
<a href="https://nikpardakht.com/blog/">وبلاگ</a>
<a href="https://nikpardakht.com/about-us">درباره ما</a>
<a href="javascript:void(0);" class="icon" onclick="menu_function()">☰</a>
</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>