"header"
Bootstrap 4.1.1 Snippet by dkstudio

<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'); } });

Related: See More


Questions / Comments: