<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 ---------->
<!-- Header Area-->
<header class="header-area">
<div class="container">
<div class="classy-nav-container breakpoint-off">
<nav class="classy-navbar justify-content-between" id="saasboxNav">
<!-- Logo--><a class="nav-brand mr-5" href="index.html"><img src="img/core-img/logo-white.png" alt=""></a>
<!-- Navbar Toggler-->
<div class="classy-navbar-toggler"><span class="navbarToggler"><span></span><span></span><span></span><span></span></span></div>
<!-- Menu-->
<div class="classy-menu">
<!-- close btn-->
<div class="classycloseIcon">
<div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
</div>
<!-- Nav Start-->
<div class="classynav">
<ul id="corenav">
<li><a href="#home">Home</a>
<ul class="dropdown">
<li><a href="creative-agency.html"><i class="lni-diamond"></i><span>Creative Agency <span>for creative agency.</span></span></a></li>
<li><a href="corporate-business.html"><i class="lni-bolt"></i><span>Corporate & Business <span>for corporate business.</span></span></a></li>
<li><a href="seo-business.html"><i class="lni-bulb"></i><span>SEO & Business <span>for seo & business.</span></span></a></li>
<li><a href="sass-landing.html"><i class="lni-cog"></i><span>Saas Landing <span>for software as a service.</span></span></a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<div class="megamenu">
<div class="single-mega cn-col-3">
<div class="megamenu-thumb"><img class="w-100" src="img/bg-img/2.jpg" alt=""></div>
</div>
<ul class="single-mega cn-col-3">
<li><a href="about-standard.html">About Standard</a></li>
<li><a href="about-creative.html">About Creative</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="service-standard.html">Service Standard</a></li>
<li><a href="service-creative.html">Service Creative</a></li>
<li><a href="pricing-plan.html">Pricing Plan</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="team.html">Team</a></li>
</ul>
<ul class="single-mega cn-col-3">
<li><a href="contact.html">Contact</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="forget-password.html">Forget Password</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="404.html">404 - Error</a></li>
</ul>
</div>
</li>
<li><a href="#blog">Works</a>
<ul class="dropdown">
<li><a href="portfolio-standard.html">Portfolio Standard</a></li>
<li><a href="portfolio-creative.html">Portfolio Creative</a></li>
<li><a href="portfolio-full-width.html">Portfolio Full Width</a></li>
<li><a href="portfolio-details-one.html">Portfolio Details One</a></li>
<li><a href="portfolio-details-two.html">Portfolio Details Two</a></li>
<li><a href="portfolio-details-three.html">Portfolio Details Three</a></li>
<li><a href="portfolio-details-four.html">Portfolio Details Four</a></li>
</ul>
</li>
<li><a href="#blog">Shop</a>
<ul class="dropdown">
<li><a href="shop-fullwidth.html">Shop Fullwidth</a></li>
<li><a href="shop-sidebar.html">Shop Sidebar</a></li>
<li><a href="single-product.html">Product Details</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</li>
<li><a href="#blog">Blog</a>
<ul class="dropdown">
<li><a href="blog-card.html">Blog Card</a></li>
<li><a href="blog-card-sidebar.html">Blog Card Sidebar</a></li>
<li><a href="blog-full.html">Blog Full</a></li>
<li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
<li><a href="blog-details-full.html">Blog Details One</a></li>
<li><a href="blog-details-left-sidebar.html">Blog Details Two</a></li>
<li><a href="blog-details-right-sidebar.html">Blog Details Three</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Login Button-->
<div class="login-btn-area ml-4 mt-4 mt-lg-0"><a class="btn saasbox-btn btn-sm" href="#">Buy Now</a></div>
</div>
</div>
</nav>
</div>
</div>
</header>
/* ----------------------------------------------------------
:: Template Name: Classy Nav - Responsive Mega Menu Plugins
:: Author: Designing World
:: Author URL: https://themeforest.net/user/designing-world/portfolio
:: Version: 1.1.0
:: Created: May 16, 2018
:: Last Updated: Jan 28, 2019
---------------------------------------------------------- */
.breakpoint-on .dd-trigger::after,
.icon-classy-nav-down-arrow:before {
content: "\e900"
}
.classy-nav-container {
position: relative;
z-index: 1;
background-color: #fff;
}
.classy-navbar .nav-brand,
.classy-navbar .nav-brand:focus,
.classy-navbar .nav-brand:hover {
font-size: 26px;
font-weight: 500
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.justify-content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.classy-navbar {
width: 100%;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
.classy-navbar .nav-brand {
color: #232323;
display: inline-block;
margin-right: 30px
}
.classynav ul li {
display: inline-block;
clear: both;
/*position: inherit;*/
z-index: 10
}
.classynav ul li.cn-dropdown-item,
.classynav ul li.cn-dropdown-item ul li {
position: relative;
z-index: 10
}
.classynav ul li ul li {
display: block
}
.classynav ul li ul li a {
padding: 0 20px
}
.classynav ul li a {
padding: 0 15px;
display: block;
height: 40px;
font-size: 14px;
line-height: 39px
}
.classycloseIcon,
.dd-trigger {
position: absolute;
display: none
}
.classynav ul li .megamenu li a {
padding: 0 12px
}
.classynav ul li div.single-mega a {
height: auto;
line-height: 1
}
@font-face {
font-family: classyfonts;
src: url(../../fonts/classy-fonts.eot?fftrrv);
src: url(../../fonts/classy-fonts.eot?fftrrv#iefix) format("embedded-opentype"), url(../../fonts/classy-fonts.ttf?fftrrv) format("truetype"), url(../../fonts/classy-fonts.woff?fftrrv) format("woff"), url(../../fonts/classy-fonts.svg?fftrrv#classyfonts) format("svg");
font-weight: 400;
font-style: normal
}
.icon-classy-nav-down-arrow {
font-family: classyfonts;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.classynav ul li.has-down > a:after,
.classynav ul li.megamenu-item > a:after {
font-family: classyfonts;
content: "\e900";
font-size: 12px;
color: #000;
padding-left: 5px;
-webkit-transition-duration: .5s;
transition-duration: .5s
}
.classynav ul li ul li.has-down > a::after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
top: 2px;
right: 10px;
z-index: 3
}
.dd-trigger {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
cursor: pointer;
z-index: 500;
border-radius: 0
}
.classycloseIcon {
top: 20px;
right: 20px;
z-index: 12
}
.classycloseIcon .cross-wrap {
width: 26px;
height: 26px;
cursor: pointer;
position: relative
}
.classycloseIcon .cross-wrap span {
position: absolute;
display: block;
width: 100%;
height: 2px;
border-radius: 6px;
background: #232323
}
.classycloseIcon .cross-wrap span.top {
top: 12px;
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.classycloseIcon .cross-wrap span.bottom {
bottom: 12px;
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.classy-navbar-toggler {
border: none;
background-color: transparent;
cursor: pointer;
display: none
}
.classy-navbar-toggler .navbarToggler {
display: inline-block;
cursor: pointer
}
.classy-navbar-toggler .navbarToggler span {
position: relative;
background-color: #707070;
border-radius: 3px;
display: block;
height: 3px;
margin-top: 5px;
padding: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
width: 30px;
cursor: pointer
}
.classy-navbar-toggler .navbarToggler.active span:nth-of-type(1) {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
top: 8px
}
.classy-navbar-toggler .navbarToggler.active span:nth-of-type(2) {
opacity: 0
}
.classy-navbar-toggler .navbarToggler.active span:nth-of-type(3) {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
top: -8px
}
.classynav ul li .megamenu {
position: absolute;
width: 100%;
left: 0;
top: 100%;
background-color: #fff;
z-index: 200;
box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}
.classynav ul li .megamenu .single-mega.cn-col-5 {
width: 20%;
float: left;
padding: 15px;
border-right: 1px solid #f2f4f8
}
.classynav ul li .megamenu .single-mega.cn-col-5:last-of-type {
border-right: none
}
.classynav ul li .megamenu .single-mega.cn-col-4 {
width: 25%;
float: left;
padding: 15px;
border-right: 1px solid #f2f4f8
}
.classynav ul li .megamenu .single-mega.cn-col-4:last-of-type {
border-right: none
}
.classynav ul li .megamenu .single-mega.cn-col-3 {
width: 33.3333334%;
float: left;
padding: 15px;
border-right: 1px solid #f2f4f8
}
.classynav ul li .megamenu .single-mega.cn-col-3:last-of-type {
border-right: none
}
.classynav ul li .megamenu .single-mega .title {
font-size: 14px;
border-bottom: 1px solid #f2f4f8;
padding: 8px 12px
}
.classynav ul li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
border-bottom: 1px solid rgba(242, 244, 248, .7)
}
.classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
border-bottom: none
}
.breakpoint-off .classynav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
.breakpoint-off .classynav ul li .dropdown {
width: 180px;
position: absolute;
background-color: #fff;
top: 120%;
left: 0;
z-index: 100;
height: auto;
box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-webkit-transition-duration: .3s;
transition-duration: .3s;
opacity: 0;
visibility: hidden;
padding: 10px 0
}
.breakpoint-off .classynav ul li .dropdown li .dropdown {
top: 10px;
left: 180px;
z-index: 200;
opacity: 0;
visibility: hidden
}
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown {
opacity: 0;
visibility: hidden;
top: 120%
}
.breakpoint-off .classynav ul li:hover .dropdown {
opacity: 1;
visibility: visible;
top: 100%
}
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .classynav ul li .dropdown li:hover .dropdown {
opacity: 1;
visibility: visible;
top: -10px
}
.breakpoint-off .classynav ul li .megamenu {
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
left: 0;
top: 120%;
background-color: #fff;
z-index: 200;
box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.breakpoint-off .classynav ul li.megamenu-item:focus .megamenu,
.breakpoint-off .classynav ul li.megamenu-item:hover .megamenu {
top: 100%;
visibility: visible;
opacity: 1
}
.breakpoint-on .classy-navbar-toggler,
.breakpoint-on .classycloseIcon {
display: block
}
.breakpoint-on .classy-navbar .classy-menu {
background-color: #fff;
position: fixed;
top: 0;
left: -340px;
z-index: 9999;
width: 320px;
height: 100%;
-webkit-transition-duration: .5s;
transition-duration: .5s;
padding: 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
display: block;
overflow-x: hidden;
overflow-y: scroll
}
.breakpoint-on .classynav ul li .dropdown,
.breakpoint-on .classynav ul li .dropdown li .dropdown {
width: 100%;
top: 0;
left: 0;
position: relative
}
.breakpoint-on .classy-navbar .classy-menu.menu-on {
left: 0
}
.breakpoint-on .classynav ul li {
display: block;
position: relative;
clear: both;
z-index: 10
}
.breakpoint-on .classynav ul li a {
padding: 0 15px;
height: 45px;
line-height: 45px
}
.breakpoint-on .classynav ul li .dropdown {
box-shadow: none
}
.breakpoint-on .classynav ul li.megamenu-item {
position: relative;
z-index: 10
}
.breakpoint-on .dd-trigger {
height: 31px;
width: 31px;
background-color: #2c3e50;
top: 7px;
right: 15px;
left: auto;
display: block;
border-radius: 2px
}
.breakpoint-on .classynav ul li .dropdown,
.breakpoint-on .classynav ul li .megamenu,
.breakpoint-on .classynav ul li.has-down > a::after,
.breakpoint-on .classynav ul li.megamenu-item > a::after {
display: none
}
.breakpoint-on .dd-trigger::after {
font-family: classyfonts;
font-size: 12px;
color: #fff;
-webkit-transition-duration: .5s;
transition-duration: .5s;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.breakpoint-on .classynav {
padding-top: 80px;
margin-bottom: 80px
}
.breakpoint-on .classynav ul {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
width: 100%
}
.breakpoint-on .classynav ul li .megamenu {
position: relative;
width: 100%;
left: 0;
top: 0;
z-index: 200;
box-shadow: none
}
.breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-3,
.breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-4,
.breakpoint-on .classynav ul li .megamenu .single-mega.cn-col-5 {
width: 100%;
border-right: none;
border-bottom: 1px solid #f2f4f8
}
.breakpoint-on .classynav > ul > li > a {
background-color: #f2f4f8;
border-bottom: 1px solid rgba(255, 255, 255, .5)
}
.breakpoint-on .classynav ul li ul.dropdown li ul li {
margin-left: 15px
}
.breakpoint-on .classynav ul li.has-down.active > .dd-trigger,
.breakpoint-on .classynav ul li.megamenu-item.active > .dd-trigger {
background-color: #27ae60;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
/*# sourceMappingURL=classy-nav.css.map */
/* Header CSS */
.header-area {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
background-color: transparent; }
.header-area .classy-nav-container {
background-color: transparent; }
.classy-navbar {
height: 100px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; }
@media only screen and (max-width: 767px) {
.classy-navbar {
height: 60px; } }
.classy-navbar .classynav ul li a {
padding: 1.75rem 1rem;
height: auto;
line-height: 1;
color: #ffffff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.classy-navbar .classynav ul li a {
padding: 30px 15px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.classy-navbar .classynav ul li a {
padding: 15px;
color: #1f0757; } }
@media only screen and (max-width: 767px) {
.classy-navbar .classynav ul li a {
padding: 15px;
color: #1f0757; } }
.classy-navbar .classynav ul li a:hover, .classy-navbar .classynav ul li a:focus {
color: #ffffff; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.classy-navbar .classynav ul li a:hover, .classy-navbar .classynav ul li a:focus {
color: #0811fb; } }
@media only screen and (max-width: 767px) {
.classy-navbar .classynav ul li a:hover, .classy-navbar .classynav ul li a:focus {
color: #0811fb; } }
.classy-navbar .classynav > ul > li:hover > a {
color: #fdd76e; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.classy-navbar .classynav > ul > li:hover > a {
color: #0811fb; } }
@media only screen and (max-width: 767px) {
.classy-navbar .classynav > ul > li:hover > a {
color: #0811fb; } }
.classy-navbar .classynav ul li li a {
padding: 14px 28px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #1f0757; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.classy-navbar .classynav ul li li a {
padding: 14px 18px; } }
.classy-navbar .classynav ul li li a:hover, .classy-navbar .classynav ul li li a:focus {
color: #0811fb; }
.classy-navbar .classynav ul li li a i {
-webkit-box-flex: 0;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
max-width: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
font-size: 1.25rem;
margin-right: 1rem;
border: 2px solid #eeeeee;
line-height: 36px; }
.classy-navbar .classynav ul li li a i {
margin-right: 0.8rem; }
.classy-navbar .classynav ul li li a span {
display: block;
color: #1f0757;
-webkit-transition-duration: 400ms;
transition-duration: 400ms; }
.classy-navbar .classynav ul li li a span:hover, .classy-navbar .classynav ul li li a span:focus {
color: #0811fb; }
.classy-navbar .classynav ul li li a span span {
margin-top: 0.5rem;
color: #8480ae;
font-size: 13px;
text-transform: initial; }
.classy-navbar .classynav ul li li a span span:hover, .classy-navbar .classynav ul li li a span span:focus {
color: #8480ae; }
.classy-navbar .classynav ul li .dropdown li a {
border-bottom: none; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.classy-navbar .classynav ul li .dropdown li a {
padding: 14px 30px; } }
.classy-navbar .classynav ul li.has-down > a::after,
.classy-navbar .classynav ul li.megamenu-item > a::after {
color: #ffffff;
display: none; }
.header2 .classynav > ul > li:hover > a {
color: #0811fb; }
.header2 .classynav ul li a {
color: #1f0757; }
.header2 .classynav ul li a:hover, .header2 .classynav ul li a:focus {
color: #0811fb; }
.header2 .classynav ul li.has-down > a::after,
.header2 .classynav ul li.megamenu-item > a::after {
color: #1f0757; }
.header2 .classynav > ul > li > a::before {
background-color: #0811fb; }
.classy-navbar-toggler {
width: 30px;
height: 30px;
padding: 2px; }
.classy-navbar-toggler .navbarToggler {
position: relative;
z-index: 1;
width: 26px;
height: 26px; }
.classy-navbar-toggler .navbarToggler span {
position: absolute;
z-index: auto;
width: 10px;
border-radius: 50%;
height: 10px;
margin: 0; }
.classy-navbar-toggler .navbarToggler span:first-child {
top: 0;
left: 0;
background-color: #ffffff; }
.classy-navbar-toggler .navbarToggler span:nth-child(2) {
top: 0;
right: 0;
background-color: #fdd76e; }
.classy-navbar-toggler .navbarToggler span:nth-child(3) {
bottom: 0;
left: 0;
background-color: #fdd76e; }
.classy-navbar-toggler .navbarToggler span:last-child {
bottom: 0;
right: 0;
background-color: #ffffff; }
.classy-navbar-toggler .navbarToggler.active span:first-child {
top: 0;
left: 0;
border-radius: 50% 50% 0% 50%;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); }
.classy-navbar-toggler .navbarToggler.active span:nth-child(2) {
top: 0;
right: 0;
opacity: 1;
border-radius: 50% 50% 50% 0%; }
.classy-navbar-toggler .navbarToggler.active span:nth-child(3) {
bottom: 0;
left: 0;
top: auto;
border-radius: 50% 0% 50% 50%;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); }
.classy-navbar-toggler .navbarToggler.active span:last-child {
bottom: 0;
right: 0;
border-radius: 0% 50% 50% 50%; }
.header2 .classy-navbar-toggler .navbarToggler span:first-child {
background-color: #0811fb; }
.header2 .classy-navbar-toggler .navbarToggler span:nth-child(2) {
background-color: #00b894; }
.header2 .classy-navbar-toggler .navbarToggler span:nth-child(3) {
background-color: #00b894; }
.header2 .classy-navbar-toggler .navbarToggler span:last-child {
background-color: #0811fb; }
.classycloseIcon {
top: 27px; }
.breakpoint-off .classynav ul li .dropdown {
width: 290px;
-webkit-transition-duration: 430ms;
transition-duration: 430ms;
border-radius: 6px;
-webkit-box-shadow: 0 0 88px 8px rgba(47, 91, 234, 0.125);
box-shadow: 0 0 88px 8px rgba(47, 91, 234, 0.125);
padding: 1rem 0; }
.breakpoint-off .classynav ul li .megamenu {
-webkit-transition-duration: 430ms;
transition-duration: 430ms;
border-radius: 6px;
border: none;
-webkit-box-shadow: 0 0 88px 8px rgba(47, 91, 234, 0.125);
box-shadow: 0 0 88px 8px rgba(47, 91, 234, 0.125); }
.breakpoint-off .classynav ul li:hover .dropdown,
.breakpoint-off .classynav ul li:hover .megamenu {
-webkit-animation: fadeInUp 430ms ease-in;
animation: fadeInUp 430ms ease-in; }
.breakpoint-off .classynav ul li.megamenu-item:focus .megamenu,
.breakpoint-off .classynav ul li.megamenu-item:hover .megamenu {
top: 92%; }
.breakpoint-on .dd-trigger {
background-color: #1f0757; }
.breakpoint-on .classynav ul li.has-down.active > .dd-trigger,
.breakpoint-on .classynav ul li.megamenu-item.active > .dd-trigger {
background-color: #0811fb; }
.breakpoint-on .classynav > ul > li > a {
background-color: #f4f4ff; }
.breakpoint-on .classy-navbar .classy-menu {
-webkit-box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2);
box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2); }
.header-area.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 1001;
background-color: #0811fb;
-webkit-box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2);
box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2); }
.header-area.sticky .classy-navbar {
height: 80px; }
@media only screen and (max-width: 767px) {
.header-area.sticky .classy-navbar {
height: 60px; } }
.header-area.header2.sticky {
background-color: #ffffff;
-webkit-box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2);
box-shadow: 0 0.25rem 0.25rem 0 rgba(15, 30, 150, 0.2); }
// **********************************************
// ** Classy Nav - 1.1.0
// ** Responsive Megamenu Plugins
// ** Copyright (c) 2019 Designing World
// **********************************************
!function(e){e.fn.classyNav=function(n){var a=e(".classy-nav-container"),s=e(".classynav ul"),o=e(".classynav > ul > li"),i=e(".classy-navbar-toggler"),l=e(".classycloseIcon"),t=e(".navbarToggler"),d=e(".classy-menu"),r=e(window),c=e.extend({breakpoint:991,openCloseSpeed:500,megaopenCloseSpeed:800},n);return this.each(function(){function n(){window.innerWidth<=c.breakpoint?a.removeClass("breakpoint-off").addClass("breakpoint-on"):a.removeClass("breakpoint-on").addClass("breakpoint-off")}i.on("click",function(){t.toggleClass("active"),d.toggleClass("menu-on")}),l.on("click",function(){d.removeClass("menu-on"),t.removeClass("active")}),o.has(".dropdown").addClass("cn-dropdown-item"),o.has(".megamenu").addClass("megamenu-item"),s.find("li a").each(function(){e(this).next().length>0&&e(this).parent("li").addClass("has-down").append('<span class="dd-trigger"></span>')}),s.find("li .dd-trigger").on("click",function(n){n.preventDefault(),e(this).parent("li").children("ul").stop(!0,!0).slideToggle(c.openCloseSpeed),e(this).parent("li").toggleClass("active")}),e(".megamenu-item").removeClass("has-down"),s.find("li .dd-trigger").on("click",function(n){n.preventDefault(),e(this).parent("li").children(".megamenu").slideToggle(c.megaopenCloseSpeed)}),n(),r.on("resize",function(){n()}),!0===c.sideMenu&&a.addClass("sidebar-menu-on").removeClass("breakpoint-off")})}}(jQuery);
// :: Sticky Active Code
saasboxWindow.on('scroll', function () {
if (saasboxWindow.scrollTop() > 0) {
$('.header-area').addClass('sticky');
} else {
$('.header-area').removeClass('sticky');
}
});
