refrance-navbar

gistfile1.txt

combine navbar
https://stackoverflow.com/questions/41678751/smooth-scroll-header-with-fixed-position
and
http://enroutedigitallab.com/html/consultis/index.html


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <header class="mobile-menu">
        <nav id="cssmenu">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div id="head-mobile"></div>
            <div class="button"></div>
            <ul class="pull-right">
                <li><a class="active" href="index.html">Home</a>
                    <ul class="dropdown">
                        <li><a href="index.html">Home 01</a></li>
                        <li><a href="home-2.html">Home 02</a></li>
                        <li><a href="home-3.html">Home 03</a></li>
                        <li><a href="home-4.html">Home 04</a></li>
                        <li><a href="home-5.html">Home 05</a></li>
                    </ul>
                </li>
                <li><a href="about-us.html">About</a>
                    <ul class="dropdown">
                        <li><a href="about-us.html">About us 01</a></li>
                        <li><a href="about-us-2.html">About us 02</a></li>
                        <li><a href="our-partner.html">Our Partner</a></li>
                        <li><a href="our-team.html">Our Team</a></li>
                        <li><a href="martin-gray.html">Team Details</a></li>
                    </ul>
                </li>
                <li><a href="service.html">Services</a>
                    <ul class="dropdown">
                        <li><a href="service.html">Services 01</a></li>
                        <li><a href="service-2.html">Services 02</a></li>
                        <li><a href="service-3.html">Services 03</a></li>
                        <li><a href="service-details.html">Services Details</a></li>
                    </ul>
                </li>
                <li><a href="">Portfolio</a>
                    <ul class="dropdown">
                        <li><a href="portfolio.html">Portfolio 01</a></li>
                        <li><a href="portfolio-2.html">Portfolio 02</a></li>
                        <li><a href="portfolio-3.html">Portfolio 03</a></li>
                        <li><a href="portfolio-details.html">Portfolio Details</a></li>
                    </ul>
                </li>
                <li><a href="">Blog</a>
                    <ul class="dropdown">
                        <li><a href="blog-list.html">Blog-list</a></li>
                        <li><a href="blog-grid.html">Blog Grid</a></li>
                        <li><a href="blog-details.html">Blog Details</a></li>
                    </ul>
                </li>
                <li><a href="#">Page</a>
                    <ul class="dropdown">
                        <li><a href="testimonial.html">Testimonials</a></li>
                        <li><a href="faqs.html">Faq</a></li>
                        <li><a href="404.html">404</a></li>
                        <li><a href="comming-soon.html">Comming Soon</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
                <li><a class="consultis-button" href="contact.html">Get a Quote</a></li>

            </ul>
        </nav><!--/#cssmenu-->
    </header><!--/header-->
<section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>
  
  
 header {
 position: relative;
    width: 100%;
    background: #fff;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);


  
  -webkit-transition: all 0.5s ease;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: all 0.5s ease;
}
section {
  height: 300vh;
}


.fixed {
  position: fixed;
  top: 0;
  left: 0;
  animation: smoothScroll 1s forwards;
}
@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}




* {
    margin: 0;
    padding: 0;
    text-decoration: none
}
.default-header {
   
}
.header-absolute {
    position: absolute !important;
    z-index: 999;
    background: white;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 1170px;
}
.transparent-header {
    background: transparent;
    width: 100%;
    position: absolute;
    z-index: 999;
}

.logo span{
    margin-left: 10px;
}
.logo a {
    color: #222;
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
}
.logo .white-logo{
    color: #fff;
}
.logo img{
    margin-right: 20px;
}
#cssmenu .logo{
    float: left;
    padding-top: 19.5px;
}
nav {
    position: relative;
    width: 1170px;
    margin: 0 auto;
    padding-right: 0px;
    padding-left: 0px;
}
#cssmenu .consultis-button {
    padding: 15px;
    margin: 18px 0px 18px 18px;
    color: white;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

#cssmenu #head-mobile {
    display: none
}

#cssmenu {
    font-family: sans-serif;
}

#cssmenu > ul > li {
    float: left
}
#cssmenu > ul > li > a.active{
    color: #5cc35c;
}
.custom-header ul li a{
    color: #fff !important;
}

.custom-header ul .dropdown{
    background: #013c74 !important;
}
.custom-header .dropdown li a:hover{
    color: #5cc35c;
}
.custom-header ul ul li:hover > a,
.custom-header ul ul li a:hover{
    color: #5cc35c !important;
}



#cssmenu > ul > li > a {
    padding: 33px 18px;
    font-size: 13px;
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
    color: #013c74;
    font-weight: 700;
    text-transform: uppercase;
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
    /*color: #013c74*/
}

#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
    visibility: visible;
}

#cssmenu > ul > li.has-sub > a {
    /*padding-right: 30px;*/
    color: #013c74;
}

#cssmenu > ul > li.has-sub > a:after {
    /*position: absolute;*/
    /*top: 22px;*/
    /*right: 11px;*/
    /*width: 8px;*/
    /*height: 2px;*/
    /*display: block;*/
    /*background: #222;*/
    /*content: ''*/
}

#cssmenu > ul > li.has-sub > a:before {
    /*position: absolute;*/
    /*top: 19px;*/
    /*right: 14px;*/
    /*display: block;*/
    /*width: 2px;*/
    /*height: 8px;*/
    /*background: #222;*/
    /*content: '';*/
    /*-webkit-transition: all .25s ease;*/
    /*-ms-transition: all .25s ease;*/
    /*transition: all .25s ease*/
}

#cssmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0
}

#cssmenu ul ul {
    position: absolute;
    left: -9999px;
}

#cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}
#cssmenu .dropdown{
    background: #fff;
    padding: 1px 0px;
}
/*#cssmenu ul ul li:hover {*/
    /*background: #2b2b2b;*/
/*}*/

#cssmenu ul ul li:hover{
  background: red;
}


#cssmenu li:hover > ul {
    left: auto;
}

#cssmenu li:hover > ul > li {
    height: 38px
}

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

#cssmenu ul ul li a {
    padding: 15px;
    width: 205px;
    font-size: 13px;
    text-decoration: none;
    color: #013c74;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
    border-bottom: 0
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: #5cc35c;
    background: #ededed;
}

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #363636;
}

#cssmenu ul ul ul li.active a {
    border-left: 1px solid #333
}

#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active> a {
    border-top: 1px solid #333
}

@media screen and (max-width:1000px) {
    .transparent-header {
        background: #fff;
    }
    .custom-header ul .dropdown{
        background: #fff !important;
    }
    .custom-header ul li a{
        color: #013c74 !important;
    }
    #cssmenu .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        text-align: center;
        padding: 10px 0 0 0;
        float: none
    }
    .logo img {
        margin-right: 10px;
    }
    .logo a {
        float: left;
        padding-left: 15px;
    }
    #cssmenu .dropdown{
        background: transparent;
    }
    .logo2 {
        display: none
    }
    nav {
        width: 100%;
    }
    #cssmenu {
        width: 100%
    }
    #cssmenu ul {
        width: 100%;
        display: none
    }
    #cssmenu ul li {
        width: 100%;
        border-top: 1px solid #ededed;
    }
    #cssmenu ul li:hover {
        /*background: #363636;*/
    }
    #cssmenu ul ul li{
        background: #fff !important;
    }
    #cssmenu ul ul li,
    #cssmenu li:hover > ul > li {
        height: auto
    }
    #cssmenu > ul > li > a {
        padding: 16px 18px;
    }
    #cssmenu ul li a,
    #cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0
    }
    #cssmenu > ul > li {
        float: none
    }
    #cssmenu ul ul li a {
        padding-left: 25px
    }
    #cssmenu ul ul li {
        background: #fff!important;
    }
    #cssmenu ul ul li:hover {
        background: #363636!important
    }
    #cssmenu ul ul ul li a {
        padding-left: 35px
    }
    #cssmenu ul ul li a {
        color: #000;
        background: none;
        font-weight: 400;
        font-family: "Open Sans", sans-serif;
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li.active > a {
        color: #fff !important;
        background: transparent;
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left
    }
    #cssmenu > ul > li.has-sub > a:after,
    #cssmenu > ul > li.has-sub > a:before,
    #cssmenu ul ul > li.has-sub > a:after,
    #cssmenu ul ul > li.has-sub > a:before {
        display: none
    }
    #cssmenu > ul > li.has-sub > a{
        /*color: #fff;*/
    }
    #cssmenu #head-mobile {
        display: block;
        padding: 30px;
        color: #ddd;
        font-size: 12px;
        font-weight: 700
    }
    #cssmenu .consultis-button {
        margin: 18px 0px 18px 0px;
    }
    .button {
        width: 55px;
        height: 46px;
        position: absolute;
        right: 0;
        top: 8px;
        cursor: pointer;
        z-index: 12399994;
    }
    .button:after {
        position: absolute;
        top: 22px;
        right: 20px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
        content: ''
    }
    .button:before {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        top: 16px;
        right: 20px;
        display: block;
        height: 2px;
        width: 20px;
        background: #000;
        content: ''
    }
    
    .button.menu-opened:after {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        top: 23px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #000;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    .button.menu-opened:before {
        top: 23px;
        background: #000;
        width: 19px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid #ededed;
        height: 46px;
        width: 46px;
        cursor: pointer
    }
    #cssmenu .submenu-button.submenu-opened {
        background: #fff
    }
    #cssmenu ul ul .submenu-button {
        height: 34px;
        width: 34px
    }
    #cssmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #000;
        content: ''
    }
    #cssmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px
    }
    #cssmenu .submenu-button.submenu-opened:after {
        background: #000
    }
    #cssmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #000;
        content: ''
    }
    #cssmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px
    }
    #cssmenu .submenu-button.submenu-opened:before {
        display: none
    }
    #cssmenu ul ul ul li.active a {
        border-left: none
    }
    #cssmenu > ul > li.has-sub > ul > li.active > a,
    #cssmenu > ul ul > li.has-sub > ul > li.active > a {
        border-top: none
    }

}


js

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();
   
  if (scroll >= 300) { 
    sticky.addClass('fixed'); }
  else { 
   sticky.removeClass('fixed');

}
});



(function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 1000;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);