Bootstrap: How to navbar fixed ?

Question

How to navbar fixed at top using bootstrap3

Rajesh Gami · Answer

refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_fixed&stacked=h "en" > Bootstrap Example "utf-8" > "viewport" content= "width=device-width, initial-scale=1" > "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > "height:1500px" > class = "navbar navbar-inverse navbar-fixed-top" > class = "container-fluid" > class = "navbar-header" > class = "navbar-brand" href= "#" >WebSiteName class = "nav navbar-nav" > class = "active" > "#" >Home "#" >Page 1 "#" >Page 2 "#" >Page 3 class = "container" style= "margin-top:50px" > Fixed Navbar class = "row" > class = "col-md-4" > A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. class = "col-md-4" > A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. class = "col-md-4" > A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. Scroll this page to see the effect Affix type: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&stacked=h Bootstrap Example "utf-8" > "viewport" content= "width=device-width, initial-scale=1" > "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > /* Note: Try to remove the following lines to see the effect of CSS positioning */ .affix { top: 0; width: 100%; z-index: 9999 !important; } .affix + .container-fluid { padding-top: 70px; } class = "container-fluid" style= "background-color:#F44336;color:#fff;height:200px;" > Bootstrap Affix Example Fixed (sticky) navbar on scroll Scroll this page to see how the navbar behaves with data-spy= "affix" . The navbar is attached to the top of the page after you have scrolled a specified amount of pixels. class = "navbar navbar-inverse" data-spy= "affix" data-offset-top= "197" > class = "nav navbar-nav" > class = "active" > "#" >Basic Topnav "#" >Page 1 "#" >Page 2 "#" >Page 3 class = "container-fluid" style= "height:1000px" > Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling Some text to enable scrolling

Purvi Barot · Answer

please refer below link: https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/ https://getbootstrap.com/docs/4.0/components/navbar/ Tank you!

Bootstrap: How to navbar fixed ?

Answers (2)