"Double top"
Bootstrap 4.0.0 Snippet by sumi9xm

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/line-awesome.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script src="js/main.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <!--=====================TOP NAV=====================--> <section> <div class="top_bar"> <div class="container"> <div class="col-md-6"> <ul class="social"> <li><a href=""><i class="fa fa-facebook text-white"></i></a></li> <li><a href=""><i class="fa fa-twitter text-white"></i></a></li> <li><a href=""><i class="fa fa-instagram text-white"></i></a></li> </ul></div> <div class="col-md-6"> <ul class="rightc"> <li><i class="fa fa-envelope-o"></i> www@gmail.com </li> <li><i class="fa fa-user"></i> <a href="" >Partner</a></li> </ul> </div> </div> </div> <!--top_bar--> </section> <!--=============================================== NAVBAR ===============================================--> <div class="" id="nav-wrapper"> <nav class="nav"> <div class="container"> <div class="brand-logo"> <a href="index.html"> <img src="images/logo2.png" style="width: 140px;"> </a> </div> <div class="menu-icon"> <div id="nav-icon" class=""> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="nav-warp navi"> <ul> <li><a class="hvr-line-No" href="#">Home</a> </li> <li><a class="hvr-line-No" href="#">Chemical Pricing</a> </li> <li><a class="hvr-line-No" href="#">Company profile</a> </li> <li><a class="hvr-line-No" href="#">Free Trial</a> </li> <li><a class="hvr-line-No" href="#">Contact us</a> </li> <li><a href="login.html" class="login-btn">Login</a> </li> </ul> </div> </div> </nav> </div> <!--=============================================== MAIN SECTION ===============================================--> </body> </html>
body { line-height: 1.42857143; color: #333; background-color: #f3f3f3; } .top_bar { min-height:40px; /* background: #30bed6; /* Old browsers */ background: -moz-linear-gradient(left, #30bed6 0%, #38cac9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #30bed6 0%,#38cac9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #30bed6 0%,#38cac9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30bed6', endColorstr='#38cac9',GradientType=1 ); /* IE6-9 */} .social { list-style-type:none; margin-bottom:0px; float:left; padding:0px; margin-left:0px;} .social li { float:left;} .social li a { padding:0 10px; font-size:13px; line-height:40px; color:#FFF;} .rightc { list-style-type:none; margin-bottom:0px; float:right;} .rightc li { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;} .rightc li a { color:#FFF; } /*///////////////////////////////NAVBAR///////////////////////////////*/ .nav { position: relative; padding: 10px 0px; padding-bottom: 15px; background-color: #fff; /* border-bottom: solid 2px #E1EFFC;*/ } .brand-logo{ display: inline-block; float:left; margin-top: 12px; } .nav-warp ul{ margin:0px; padding:0px; float:right; margin-top: 6px; } .nav-warp ul li{ list-style-type: none; float: left; } .nav-warp ul li a { display: inline-block; font-size: 16px; padding: 8px 10px; color: #000000; font-family: 'Comfortaa'; font-weight: 400; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; font-family: 'TitilliumWeb'; letter-spacing: 2px; } .nav-warp ul li a:hover{ color: #2196f4; } .login-btn { padding: 7px 20px!important; text-align: center; margin-left: 25px; border-radius: 50px; text-decoration: none; border: solid 0px; background-color: #2196f4; color: #ffffff !important; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.15); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #modalx-zoomIn .login-btn { padding: 10px 20px!important; } .hvr-line { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; } .hvr-line:before { content: ""; position: absolute; z-index: -99; left: 50%; right: 50%; top: 0; background: #2196f4; height: 2px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-line:hover:before, .hvr-line:focus:before, .hvr-line:active:before { left: 0; right: 0; } /*==============NAV ICON==============*/ .menu-icon { display: none; width: 50px; height: 50px; position: absolute; z-index: 99; right: 15px; } #nav-icon { width: 30px; height: 35px; position: relative; margin: 16px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 3px; width: 50%; background: #2196f4; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon span:nth-child(even) { left: 50%; border-radius: 0 9px 9px 0; } #nav-icon span:nth-child(odd) { left: 0px; border-radius: 9px 0 0 9px; } #nav-icon span:nth-child(1), #nav-icon span:nth-child(2) { top: 0px; } #nav-icon span:nth-child(3), #nav-icon span:nth-child(4) { top: 10px; } #nav-icon span:nth-child(5), #nav-icon span:nth-child(6) { top: 20px; } #nav-icon.open span:nth-child(1), #nav-icon.open span:nth-child(6) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon.open span:nth-child(2), #nav-icon.open span:nth-child(5) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon.open span:nth-child(1) { left: 0px; top: 9px; } #nav-icon.open span:nth-child(2) { left: calc(50% - 5px); top: 9px; } #nav-icon.open span:nth-child(3) { left: -50%; opacity: 0; } #nav-icon.open span:nth-child(4) { left: 100%; opacity: 0; } #nav-icon.open span:nth-child(5) { left: 0px; top: 19px; } #nav-icon.open span:nth-child(6) { left: calc(50% - 5px); top: 19px; } .nav-fa-fa-icon { display: none; } .nav li a:hover { transition: 0.5s; } .stick { background-color: #fff!important; position: fixed; display: block; transition: top 0.3s; box-shadow: 0px 6px 20px 0 rgba(0, 55, 255, 0.08), 0 2px 20px 0 rgba(0, 43, 255, 0.08); } @media screen and (max-width: 768px) { .marg-bo-30{ margin-bottom: 30px; } .nav-warp{ position: fixed; padding: 15px; width: 270px; margin-top: -10px; right:-270px; height: 100vh; background: #fff; z-index: 9; } .nav-warp li{ display: block; float: none!important; } .nav-warp ul li a:hover{ /* background-color: #2196f4; */ color: #fff; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; transition: 2s; } .nav-warp li a{ width:100%; border-radius: 50px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .nav-warp ul{ width:100%; margin-top: 60px; } .menu-icon { display: block; } .login-btn { margin-top: 25px; margin-left: 0px; } #sidebar-menu { margin-top: 0px; position: fixed; z-index: 9; left: -270px; width: 270px; top: 61px; border-top: solid 1px; transition: all 0.2s ease-in; overflow-x: scroll; max-height: 650px; } .sidebar-shwo{ left:0px !important; } .Categories-btn{ display: block !important; } }
//NAVBAR RESPONSIVE====================================== $(document).ready(function() { $(window).scroll(function(){ if ($(this).scrollTop() > 50) { $('#hit-nav-wrapper').addClass('stick'); } else { $('#hit-nav-wrapper').removeClass('stick'); } }); }); //NAV ICON & SLIDE NAV================================== $(document).ready(function() { $('#nav-icon').click(function() { $(this).toggleClass('open'); if ($('.nav-warp').hasClass('navi')) { $('.nav-warp').animate({ right: '0px' }, 500).removeClass('navi'); } else { $('.nav-warp').animate({ right: -270 }, 500).addClass('navi'); } }); }); //Categories NAV================================== $(document).ready(function() { $('#cate').click(function() { $('#sidebar-menu').toggleClass('sidebar-shwo') }); }); //SIDEBAR MENU========================================= (function($){ $(document).ready(function(){ $('#sidebar-menu li.active').addClass('open').children('ul').show(); $('#sidebar-menu li.has-sub>a').on('click', function(){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(200); } else { element.addClass('open'); element.children('ul').slideDown(200); element.siblings('li').children('ul').slideUp(200); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(200); } }); }); })(jQuery);

Related: See More


Questions / Comments: