<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="costom-header">
<div class="container">
<div class="custom-header-wrap">
<div class="header-logo">
<a href="#"><img src="images/logo.png" alt="Logo" /></a>
</div>
<div class="desktop-trigger desktop-none">
<div class="trigger-style mob-trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="hs-menu-wrapper-outer">
<div class="hs-menu-wrapper">
<div class="close-menu-trigger"></div>
<ul class="hs-menu-deft">
<li class="hs-menu-item"><a href="index.html">Home</a></li>
<li class="hs-menu-item hs-item-has-children"><a href="">Find a tutor</a>
<ul class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-item-has-children"><a href="javascript:;"><span>Child Menu1</span></a>
<ul class="hs-menu-children-wrapper">
<li class="hs-menu-item"><a href=""><span>Child menu item1</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu item2</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu item3</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu item4</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu item5</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu item6</span></a></li>
</ul>
</li>
<li class="hs-menu-item hs-item-has-children"><a href="javascript:;"><span>Child Menu2</span></a>
<ul class="hs-menu-children-wrapper">
<li class="hs-menu-item"><a href=""><span>Child menu1 item1</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu2 item2</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu3 item3</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu4 item4</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu5 item5</span></a></li>
<li class="hs-menu-item"><a href=""><span>Child menu6 item6</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="hs-menu-item"><a href="">How it works</a></li>
<li class="hs-menu-item"><a href="">Courses Packages</a></li>
<li class="hs-menu-item button-style-link"><a href=""><span>Demo Session</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.costom-header{background-color:#fff;box-shadow:0 0 7px 2px #ddd;padding:0 0}
.custom-header-wrap{display:flex;width:100%;align-items:center;justify-content:space-between}
.header-logo img{vertical-align:middle;max-width:100%}
.header-logo a{display:inline-block;text-decoration:none;white-space:nowrap}
.hs-menu-wrapper{position:relative}
.desktop-menu{flex-grow:1;flex-basis:auto;position:relative}
.desktop-menu>ul{margin:0;padding:0;list-style-type:none;display:flex;justify-content:end;align-items:center}
.desktop-menu ul li a{text-decoration:none;padding:10px 10px;line-height:1.5;font-size:15px;font-weight:600;color:#000;outline:0;display:block;position:relative;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}
.desktop-menu ul li a:hover{color:#008afb;text-decoration:none}
.desktop-menu ul li.login-btn a{padding:8px 10px;font-size:15px;background-color:#0071dc;cursor:pointer;text-transform:uppercase;font-weight:400;color:#fff;border-radius:4px;margin-left:10px;min-width:100px;text-align:center}
.desktop-menu ul li a em{position:absolute;font-style:normal;line-height:8px;font-size:9px;background-color:#dc3545;color:#fff;padding:3px 6px;border-radius:10px;top:-5px;right:0;text-transform:capitalize;cursor:default;animation:blink-animation 1s infinite;-webkit-animation:blink-animation 1s infinite}
.hs-menu-deft li a{text-decoration:none;display:block;color:#1d1d1d;text-transform:capitalize;font-weight:500;font-size:18px;padding:8px 15px}
.hs-menu-deft li.hs-item-has-children>a{position:relative;padding-right:24px}
.hs-menu-deft li ul ul:after,.hs-menu-deft li ul ul:before{content:"";display:block}
.desktop-menu ul li.login-btn a:hover{background-color:#ffc221}
.desktop-menu-itm .search-btn{padding-left:10px;padding-right:2px}
.desktop-trigger{display:flex;align-items:center;padding:13px 0;cursor:pointer}
.trigger-style{position:relative;height:20px;width:20px;display:flex;justify-content:space-between;line-height:1}
.trigger-style span,.trigger-style span:after,.trigger-style span:before{height:3px;width:3px;background-color:#333;content:"";display:block;border-radius:50%;border:1px solid #333;box-sizing:content-box;position:absolute}
.trigger-style span:after{position:relative;top:10px;left:-1px}
.trigger-style span:before{position:relative;top:7px;left:-1px}
.trigger-style span:nth-child(2){left:8px}
.trigger-text{padding-left:12px}
.trigger-style span:nth-child(3){left:16px}
.hs-menu-deft li.button-style-link>a{background-color:#019cf8;text-align:left;color:#fff;border-radius:30px;position:relative;text-transform:uppercase;padding-left:11px}
.hs-menu-deft li.button-style-link{margin:0 0 0 10px}
.hs-menu-deft li.button-style-link>a:before{content:"";height:30px;width:30px;display:inline-block;vertical-align:middle;background-image:url(../images/sprits-icons.png);background-color:#fff;border-radius:50%;background-position:-3px 0;margin-right:8px}
.hs-menu-deft li.button-style-link span{position:relative;top:2px}
.hs-menu-deft li.button-style-link:hover>a{background-color:#ffc221;color:#fff}
@media (min-width:992px){.hs-menu-deft>li{padding:15px 0}
.hs-menu-children-wrapper .dl-back{display:none!important}
.child-trigger,.close-menu-trigger,.desktop-none{display:none}
.hs-menu-deft li.hs-item-has-children:hover>a:after{border-color:#03456c}
.hs-menu-deft{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}
.hs-menu-deft li.hs-item-has-children>a:after{content:"";border:solid #333;border-width:0 1px 1px 0;display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg);-webkit-transform:rotate(45deg);position:absolute;top:17px;right:12px}
.hs-menu-deft ul li.hs-item-has-children>a:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.hs-menu-deft li:hover>a{color:#03456c;text-decoration:none}
.hs-menu-deft li ul li:hover>a{color:#03456c;text-decoration:none;background-color:#f3f1f1}
.hs-menu-item.hs-item-has-children{position:relative}
.hs-menu-deft li ul{margin:0;padding:0;list-style-type:none;position:absolute;z-index:99;background-color:#f5f5f5;left:0;top:100%;width:200px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}
.hs-menu-deft li ul ul{top:0;left:100%}
.hs-menu-deft li.hs-item-has-children:hover>ul{opacity:1;visibility:visible;pointer-events:all}
.hs-menu-deft ul li.hs-item-has-children>a:after{top:21px}
.hs-menu-deft li ul li>a{padding-top:10px;padding-bottom:10px}}
@media (max-width:991px){.desktop-menu,.mobile-none{display:none}
.custom-header-wrap{padding:12px 0}
.hs-menu-wrapper-outer{display:block;background-color:#0071dc;width:270px;position:fixed;left:-280px;top:0;height:100vh;padding:25px 10px 5px;transition:left .3s;z-index:9}
.mobile-open .hs-menu-wrapper-outer{left:0}
.custom-header-wrap:after{content:"";height:100%;width:100%;position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgb(0 0 0 / 36%);z-index:1;opacity:0;visibility:hidden;pointer-events:none;transition:all.3s;opacity:0;visibility:hidden;pointer-events:none}
.mobile-open .custom-header-wrap:after{opacity:1;visibility:visible;pointer-events:all}
.hs-menu-wrapper{overflow-x:hidden;overflow-y:auto;max-height:100%;height:100%}
.hs-menu-deft{position:relative;display:block}
.hs-menu-wrapper ul{padding:20px 5px 20px;margin:0;list-style:none}
.hs-menu-children-wrapper{top:0;left:100%;width:100%;opacity:0;visibility:hidden;pointer-events:none;position:absolute;transition:all .7s}
.hs-menu-children-wrapper.open-cheldren{opacity:1;visibility:visible;pointer-events:all}
.hs-menu-wrapper ul li a{color:#fff;font-size:14px;padding:11px 0;display:block;outline:0;border-color:#1583ee}
.child-trigger{width:40px;height:44px;float:right;margin-top:-42px;text-align:center;padding:13px;box-sizing:border-box;color:#fff;cursor:pointer;position:relative;z-index:1;top:-1px;margin-right:-7px}
.child-trigger:after{border:solid #fff;border-width:0 1px 1px 0;display:inline-block;padding:4px;vertical-align:middle;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);content:"";position:relative;top:-4px}
.dl-back a:before{content:"";position:relative;top:-1px;border:solid #fff;border-width:0 1px 1px 0;display:inline-block;padding:4px;vertical-align:middle;transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-right:7px}
.hs-menu-deft li.button-style-link>a{background-color:#ffc221;color:#333;border:0;padding:8px 20px;padding-left: 10px;display: inline-block;}
.hs-menu-deft li.button-style-link{padding-bottom:10px;padding-top:10px;margin:0}
.close-menu-trigger{position:absolute;right:7px;height:20px;width:20px;text-align:center;cursor:pointer;z-index:3}
.close-menu-trigger:after,.close-menu-trigger:before{content:"";height:19px;width:1px;position:absolute;background-color:#fff;transition:all .3s}
.close-menu-trigger:after{transform:rotate(40deg)}
.close-menu-trigger:before{transform:rotate(-40deg)}
.close-menu-trigger:hover:after,.close-menu-trigger:hover:before{background-color:#ffc221}}
$('.trigger-style.mob-trigger').click(function(e) {
e.stopPropagation();
$('body').toggleClass('mobile-open');
});
$('body, .close-menu-trigger').click(function() {
$('body').removeClass('mobile-open');
});
$(".hs-menu-wrapper-outer").click(function(event) {
event.stopPropagation();
});
(function($) {
$.fn.megamenu = function(options) {
var settings = $.extend({
label: "Back",
title: true,
animationSpeed: 300
}, options);
this.each(function() {
$('.dl-back').each(function() {
var labelval = $(this).parent().parent().children('a').text();
$(this).children('a').text(labelval);
});
var el = $(this);
$(this).find('ul').prepend('<li class="dl-back"><a href="#">' + settings.label + '</a></li>');
$(this).find('ul').parent('li').children('a').after('<div class="child-trigger"></div>');
$('.child-trigger').click(function() {
el.animate({
'left': '-=100%',
}, settings.animationSpeed);
$(this).next('ul').toggleClass('open-cheldren');
});
$('.dl-back').click(function() {
$(el).animate({
'left': '+=100%',
}, settings.animationSpeed);
$(this).parent('ul').toggleClass('open-cheldren');
});
if (settings.title === true) {
$('.dl-back').each(function() {
var labelval = $(this).parent().parent().children('a').text();
$(this).children('a').text(labelval);
})
}
});
};
}(jQuery));
$('.hs-menu-wrapper > ul').megamenu({
label: "Menu",
title: true,
animationSpeed: 400
});
