After Sometime we are post snippet about bootstrap 4 fixed on top navbar design with free source code. In this demo when you scroll content at that time menu also select on scroll. automatically updating nav targets based on scroll position. jQuery Plugin Fixed Bootstrap 4 Nav Smooth Scroll navbar fixed js.

In this plugin you can also set your custom setting. you can set scroll speed. this plugin you can use in your one page front home page. this smooth scroll plugin not take to time in loading.


<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Fixed Navbar</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <nav class="navbar navbar-toggleable-sm fixed-top bg-primary navbar-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#about">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </div> </nav> <div class="container-fluid section" id="about"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Home</h1> </div> </div> </div> </div> <div class="container-fluid section" id="section1"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Section 1</h1> </div> </div> </div> </div> <div class="container-fluid section" id="section2"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Section 2</h1> </div> </div> </div> </div> <div class="container-fluid section" id="section3"> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> <h1 class="text-light">Section 3</h1> </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-Fixed-Bootstrap-4-Nav-Smooth-Scroll-navbar-fixed-js/navbar-fixed.js"></script> </body> </html>
html, body { height: 100%; } .container-fluid > .container, .container > .row { height: 100%; } #about{ margin-top:50px; } .section{ margin-bottom:520px; } .text-light{ margin-top:50px; } nav { min-height: 3.5rem; } nav.fixed-top { padding: 0.5rem; } nav.bg-primary li a { color: #fff !important; } nav li a.active { padding: .2rem .4rem; color: #0275d8 !important; background-color: #fff; border-radius: .2rem; margin: .3rem 0.6rem; } nav .navbar-collapse.collapsing ul, nav .navbar-collapse.show ul { margin-top: 3rem; } nav .navbar-collapse.collapsing li a, nav .navbar-collapse.show li a { padding: 0.5rem; } nav .navbar-collapse.show li a.active { margin: 0; } .navbar-toggler { border: 0; } .bg-primary { color: #fff; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post