Resoponsive Dropdown for Bloggers

Html Code 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />


<header id="site-header" class="header">
<div class="container">
<nav>
<div class="logo" tabindex="1">Logo</div>
<div class="nav-wrap">
<div class="nav-button">
<a id="nav-toggle" href="#!" class="">
<span class="before"></span>
</a>
</div>
<ul class="top_nav">



<li><a href="#">info</a> </li> 
<li><a href="#">Tantra Massage</a>
<ul class="sub-nav">
<li> <a href="#">Neo Tantra</a></li>
<li><a href="#!">Aadi Tantra</a></li>
<li><a href="#!">Holistic Tantra</a></li>

<li><a href="#">Assets</a>
<ul class="sub-nav"> 


<li><a href="#">Blog</a></li> 
<li> <a href="#!">Docs</a> </li> 

</ul> </li> </ul> </li> 

<li><a href="">Faq</a> </li> 
<li><a href="">Booking</a> </li> 



<ul class="sub-nav">

<li> <a href="#">Jamstack</a></li>
<li><a href="#!">Wordpress</a></li>

</ul>

<li><a href="#">Services</a>



</li></ul></div>
</nav>
</div>
</header>
<!-- END Main Header -->

CSS CODE 

/*Reset css*/


*{box-sizing:border-box;margin: 0;}
.container{width: 100%;margin:0; auto;position:relative; display:inline-block;padding:20px 0px 20px 0px;height:0px;}


/*Nav*/


header {

position: relative;
top:0;
width: 100%; 
z-index: 9;
background: #eeeeee;}


nav {

display:flex;
align-items:center;
justify-content:center;
display:block;

}




.logo{

font-size:30px; 
text-transform:uppercase;
font-weight: 900;
color: #000000;
font-family: 'Oswald', sans-serif;
position:absolute; 
display:inline-block;
padding: 0px 15px 0px 20px;
margin-top:-10px;}


.logo a {

color:#333;
text-decoration:none;
font-weight:700;
font-family: 'Oswald', sans-serif;}


.nav-wrap ul{float:right;}
.nav-wrap ul.top_nav{display: inline-block;}


.nav-wrap ul li a{color: #000000;text-decoration:none;font-size:13px;padding: 0px 5px 0px 5px;position:relative;font-family: 'Oswald', sans-serif;letter-spacing:2px;text-transform: uppercase;}
.nav-wrap ul.sub-nav {display: none;}


@media screen and (min-width: 919px){


.nav-wrap ul li{list-style:none;display:inline-block;position: relative; border-right:1px solid #ffffff; }


.nav-wrap ul.sub-nav {display: none;width:200px;color: #fff;right: 0; height:auto!important;padding: 0px 0px;margin: 0px;position: absolute;left: 0px;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);}
.nav-wrap ul.sub-nav ul.sub-nav{left: 100%;top: 0;z-index: 1;}
.nav-wrap li:hover > ul.sub-nav, .nav-wrap ul.sub-nav li{display: block;background: #fff;}
.nav-wrap ul.sub-nav li a{padding: 12px;color: #333;display: block;border-bottom: 1px solid #eee;margin: 0;background: #fff;}
.nav-wrap ul.sub-nav ul.sub-nav li a{padding-right: 25px;}
.nav-wrap ul.sub-nav li:hover > a {opacity: 0.8}
.nav-wrap li:hover > ul{display:block;-moz-animation:fadeInUp .3s ease-in;-webkit-animation:fadeInUp .3s ease-in;animation:fadeInUp .3s ease-in;}
.nav-wrap > ul > li:not(:last-child){margin-right: 30px;}
.nav-wrap ul ul li:hover > ul{display:block;-moz-animation:fadeInRight .3s ease-in;-webkit-animation:fadeInRight .3s ease-in;animation:fadeInRight .3s ease-in;}
.nav-wrap ul li.has-submenu:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";font-size:16px;color:#000000;padding-right: 10px;}
.nav-wrap ul ul li.has-submenu:after{color: #333;transform: rotate(-90deg);position: absolute;right: 8px;top: 50%;padding: 0;margin-top: -7px;}
.nav-wrap ul li.submenu-active > ul.sub-nav{display:none!important;}
.nav-wrap ul li.submenu-active:hover > ul.sub-nav{display:block!important;}



/*Hover Effect*/
.nav-wrap > ul > li:before{content:'';position:absolute;width:100%;transform:scaleX(0);height:5px;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.4s cubic-bezier(0.86,0,0.07,1);}
.nav-wrap > ul > li.active:before,
.nav-wrap > ul > li:hover:before{ transform: scaleX(1);transform-origin: bottom left;}
/*Hover Effect*/
}

/*Res Button*/
.nav-button {height: 27px;width: 36px;margin-right: 30px;display: none ;}
.nav-button a{height: 27px;width: 36px;display: inline-block;cursor: pointer;}
.nav-button span,
.nav-button span:before,
.nav-button span:after{cursor:pointer;border-radius: 50px;height:5px;width:35px;background: #000000;position:absolute;display:block;content:'';transition:all 300ms ease-in-out;}
.nav-button span{margin: 10px 0 0 0;}
.nav-button span:before{top: -10px;}
.nav-button span:after{top: 10px;}


@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}


/*Res Button*/
@media screen and (max-width: 919px){
.nav-button{display: block;position:relative;float:right;}
.show_menu #nav-toggle span:after {transform: translate3d(0, -10px, 0) rotate(-91deg);}
.show_menu #nav-toggle span {transform: translate3d(0, 0px, 0) rotate(45deg);}
.show_menu #nav-toggle span:before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; }
}


@media screen and (max-width: 919px){


.container {

width: 100%;
margin:0; auto;
position:relative; 
display:inline-block;
padding:30px 0px 0px 0px; 
height:60px;


}

nav {

padding: 0px 0;
width: 100%;

}


.nav-wrap ul.top_nav {

display: none; 
position: absolute; 
left: 0;
right: 0;
top: 100%;
background: #fff;
height: calc(100vh - 85px);
overflow-y: scroll;
width: 100%;
padding-right:20px;
text-align:center;

}


.nav-wrap > ul li {


width: 100%;
position: relative;
padding:10px 0px 10px 10px;
list-style:none;
display:inline-block;
margin-top:10px;


}


.nav-wrap > ul > li:last-child { border-bottom: 1px solid #eee;}
.nav-wrap > ul > li a {

width: 100% ;
margin:0; auto;
font-size: 20px;
display: block ;
padding: 10px 2% 11px 2%;
color: #fff;
position:relative;
font-family: 'maitree', sans-serif;
font-size: 14px;
letter-spacing:2px;
line-height:1.5px;
color:#000000;

}


ul li span.down-arrow {
width: 100% ;
position: absolute;
height: 64px;
width: 100px;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
user-select: none;


}

.nav-wrap ul.sub-nav {
width: 100%; 
border :1px solid #eee;
border-radius:5px;
margin-top:5px;
}


.nav-wrap ul.sub-nav ul.sub-nav{width: 100%;}
.nav-wrap ul.sub-nav li a{width: 100%;padding: 12px;color: #333;display: block; margin: 0;background: #fff;}
.nav-wrap ul.sub-nav ul.sub-nav li a{width: 100%;padding-right: 25px;}
.nav-wrap ul li a:not(:only-child){width: 100%;display:block;position:relative;}




.nav-wrap > ul li.has-submenu:before {

font-family:"Font Awesome 5 Free";
font-weight:900;content:"\f078";
left:inherit;
right: 10px;
font-size:16px;
position:absolute;
top: 4px;
color: #fff;
background:#C91E1E;
padding: 10px;
display:inline-block;


}


.nav-wrap ul ul a{padding-left: 9%;width: 100%;diplay:block: position:relative;}


}


/*Nav*/

JQUIRY

<script type='text/javascript'>

//<![CDATA[ //


// Header Sticky
function stickyFunction() {
var header = document.getElementById("site-header");
var sticky = header.offsetHeight;
if (window.pageYOffset > 0) {
header.classList.add("fixed");
} else {
header.classList.remove("fixed");
}
}


$(document).ready(function(){
var w_width = $( window ).width();

/*Menu toggle Button*/
$('.nav-button').click(function() {
$('body').toggleClass('show_menu');
$('.nav-wrap ul.top_nav').slideToggle();
});


/*Append down-arrow Span*/
$('ul.top_nav > li:has(ul)').addClass('has-submenu').append('<span class="down-arrow"></span>');
$('li.has-submenu ul > li:has(ul)').addClass('has-submenu').append('<span class="down-arrow"></span>');


/*Navigation Menu */

/*Multi level*/
$("ul.top_nav li span.down-arrow").on("click",function(e){ 
if($(this).parents(".has-submenu").hasClass("submenu-active") && (!($(this).parent().hasClass("submenu-active")) ) ){ 
$(this).parent().siblings().removeClass("submenu-active");
$(this).parent().addClass("submenu-active");
$(this).parent().siblings(".has-submenu").children(".sub-nav").slideUp(400);
$(this).siblings(".sub-nav").slideDown(400); 
} 
else if($(this).parents(".has-submenu").hasClass("submenu-active") && $(this).parent().hasClass("submenu-active")){
$(this).parent().removeClass("submenu-active");
$(this).siblings(".sub-nav").slideUp(400); 
} 
else{
$(".has-submenu > .title").parent().removeClass("submenu-active");
$(this).parent().addClass("submenu-active");
$(".has-submenu > .sub-nav").slideUp(400);
$(this).siblings(".sub-nav").slideDown(400);
}
});

/*First Level*/
/*$('ul.top_nav li span.down-arrow').click(function(e) { 
$(this).parent().siblings().removeClass('submenu-active');
$(this).parent().toggleClass('submenu-active');
$('.sub-nav').not($(this).siblings() && $(this).parents('.sub-nav')).slideUp();
$(this).siblings('.sub-nav').slideToggle();
e.stopPropagation();
});*/


onScrollHighlighted();


})


$(window).resize( function(){
var w_width = $( window ).width();
if(w_width > 919){
$('.nav-wrap ul.top_nav').show(); 
$('.nav-wrap ul.top_nav ul').removeAttr("style");; 
}


onScrollHighlighted();


});


//]]> </script>

aadi