Nested drop down menu using w3schools method-Twitter bootstrap

MohammadGhonchesefidi
December 31, 2018
251 views
1 vote
2 Answers

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">
        <a href="#" class="Logo-header"></a>
        <div class="links-header-menu">
            <!--<a href="#home" class="active">خانه</a>-->
            <a href="#">پی پال</a>
            <a href="#">مستر کارت</a>
            <a href="#">آزمون های بین المللی</a>
            <a href="#">پرداخت های ارزی</a>
            <a href="#">پرداخت های سفارت</a>
            <a href="#">درباره ما</a>
            <div class="dropdown">
                <button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
                </button>
                <div class="dropdown-content">
                    <a href="#"><i class="fas fa-angle-left"></i> Link 1</a>
                    <a href="#"><i class="fas fa-angle-left"></i> Link 2</a>
                    <a href="#"><i class="fas fa-angle-left"></i> Link 3</a>
                </div>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="menu_function()">&#9776;</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>

Now it looks like this:

I want to be like this one:

How can I add nested menu items?

Answers

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><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></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

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">
        <a href="#" class="Logo-header"></a>
        <div class="links-header-menu">
            <!--<a href="#home" class="active">خانه</a>-->
            <a href="#">پی پال</a>
            <a href="#">مستر کارت</a>
            <a href="#">آزمون های بین المللی</a>
            <a href="#">پرداخت های ارزی</a>
            <a href="#">پرداخت های سفارت</a>
            <a href="#">درباره ما</a>
            <div class="dropdown">
                <button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
                </button>
                <div class="dropdown-content">
                   <ul> <li><a href="#"><i class="fas fa-angle-left"></i> Link 1</a>
                  <ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li>
                  <li>  <a href="#"><i class="fas fa-angle-left"></i> Link 2</a><ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li>
                   <li> <a href="#"><i class="fas fa-angle-left"></i> Link 3</a><ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li></ul>
                </div>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="menu_function()">&#9776;</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>

Also a live codepen example to playaround : https://codepen.io/Ev1tw1n/pen/OrOxQE

Please signup or login to give your own answer.

Click here to cancel reply.