"Header Fxed"
Bootstrap 4.1.1 Snippet by ranjit1602

Post to Facebook Tweet this

<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">Overview</a></li> <li class="hs-menu-item"><a href="">New Core</a></li> <li class="hs-menu-item"><a href="">Leadership</a></li> <li class="hs-menu-item"><a href="#">Operating Model</a></li> <li class="hs-menu-item"><a href="#">Contact US</a></li> </ul> </div> </div> <div class="core-logo"> <img src="images/logo-2.png" alt=""> </div> </div> </div> </div> <div class="body"></div>
.body{ height:300px;} .costom-header{ -webkit-transition: all 0.5s ease; -moz-transition: position 10s; -ms-transition: position 10s; -o-transition: position 10s; transition: all 0.5s ease; } .costom-header.stricky-fixed { position: fixed; z-index: 991; top: 0; left: 0; background-color: #fff; width: 100%; box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 5%); animation: smoothScroll 1s forwards; } @keyframes smoothScroll { 0% { transform: translateY(-40px); } 100% { transform: translateY(0px); } } .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:16px;padding:8px 15px} .hs-menu-deft li a:hover{color:#c31f2c!important; font-weight: 600;} .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}}
// window scroll event $(window).on("scroll", function () { if ($(".costom-header").length) { var headerScrollPos = 130; var stricky = $(".costom-header"); if ($(window).scrollTop() > headerScrollPos) { stricky.addClass("stricky-fixed"); } else if ($(this).scrollTop() <= headerScrollPos) { stricky.removeClass("stricky-fixed"); } } if ($(".scroll-to-top").length) { var strickyScrollPos = 100; if ($(window).scrollTop() > strickyScrollPos) { $(".scroll-to-top").fadeIn(500); } else if ($(this).scrollTop() <= strickyScrollPos) { $(".scroll-to-top").fadeOut(500); } } });

Questions / Comments: