<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 ----------> <h1 class="bg-success mb-5 mt-3"> top bar </h1> <div class=" container-fluid max-w-1366 p-0 cnav rel_pos bg-info"> <nav class="navbar sticky-top navbar-light cu_bg-transparent navbar-expand-md abl_pos"> <div class="container scrl_bg p-0"> <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"></a> <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Gallery </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Blog </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Contact Us</a> </li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="container"> <!-- <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>--> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid " src="images/ban_1.jpg" alt="AAAAA" style="min-height:380px;"> <div class="container p-0"> <div class="carousel-caption"> <h1><span class="d-block">A Melbourne</span> Tiling and Waterproofing Provider</h1> <p class="mt-3 mb-5 text-center text-box"><a class="text-white btn btn-lg rounded-0 mb-4 mt-2 btn-white btn-animate bg-transparent border border-2" href="#" role="button">contact us</a> <a class="btn btn-lg bg-white rounded-0 mb-4 mt-2 btn-white btn-animate border-2" href="#" role="button">Request a quote</a></p> </div> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="images/ban_1.jpg" alt="bbbbbbb" style="min-height:380px;"> <div class="container p-0"> <div class="carousel-caption"> <h1><span class="d-block">A Melbourne</span> Tiling and Waterproofing Provider</h1> <p class="mt-3 mb-5 text-center text-box"><a class=" text-white btn btn-lg rounded-0 mb-4 mt-2 btn-white btn-animate bg-transparent border border-2" href="#" role="button">contact us</a> <a class="btn btn-lg bg-white rounded-0 mb-4 mt-2 btn-white btn-animate border-2" href="#" role="button">Request a quote</a></p> </div> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="images/ban_1.jpg" alt="cccccc" style="min-height:380px;"> <div class="container p-0"> <div class="carousel-caption"> <h1><span class="d-block">A Melbourne</span> Tiling and Waterproofing Provider</h1> <p class="mt-3 mb-5 text-center text-box"><a class=" text-white btn btn-lg rounded-0 mb-4 mt-2 btn-white btn-animate bg-transparent border border-2" href="#" role="button">contact us </a> <a class="btn btn-lg bg-white rounded-0 mb-4 mt-2 btn-white btn-animate border-2" href="#" role="button">Request a quote</a></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> </div> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br>

.navbar-nav li { position:relative; } .navbar-nav li:not(:first-child):after { content: '|'; position: absolute; top: 11px; color:#fff; left: 0px; } .navbar-nav li:not(:first-child) { margin-left:40px; padding-left:40px; } nav{ padding-top: 25px; /*height: 108px;*/ background: #335C7D; } nav.sticky { position: fixed; top:0px; /*font-size: 24px; line-height: 48px;*/ padding-top: 0px; /*height: 50px; width: 100%;*/ background: #efc47D; opacity:0.8; text-align: left; padding-left:15px; z-index:999; } nav.sticky .navbar-header a { width:100%; font-size:15px; background:red} .custom-toggler.navbar-toggler .navbar-toggler-icon{ color:red;} .custom-toggler.navbar-toggler { border-color: #ea091f; } .rel_pos{ position:relative;} .abl_pos{ position:absolute; top:5px; left:0; right:0; } .navbar-light .navbar-nav .nav-link{ color:#fff; font-size: 20px;} .navbar-light .navbar-nav .nav-link.active { color: #f00; } .cnav.msticky{ position: inherit;} .cnav.msticky .abl_pos{ position: fixed; top:0px; } .msticky .navbar-brand img{ width:50%;} .msticky .navbar-nav .nav-link{ color:#fff;} .msticky .navbar-nav li:not(:first-child):after { content: '|'; position: absolute; top: 7px; color:#ea091f; } .cu_bg-transparent{ background:transparent;} .msticky .cu_bg-transparent{ background:rgb(4 4 4 / 48%);} .msticky .navbar{ padding-top:0px; padding-bottom:0px;} .sticky-top{ -webkit-transition: all 0.8s ease; transition: all 0.8s ease;}

$(window).scroll(function() { if ($(this).scrollTop() > 20){ $('.cnav').addClass("msticky"); } else{ $('.cnav').removeClass("msticky"); } });