1.

Fix the navbar to the top in Bootstrap

Answer»

Fixed Navigation BAR in BOOTSTRAP allow you to fix the navbar at the top. USE the .navbar-fixed-top class to achieve the same:

<nav class="navbar navbar-default navbar-fixed-top">

To check with a scrollbar, we have styled the body height as 1200px:

<body style="height:1200px">

Now, when you will scroll the page, the navigation bar would remain fixed on the top. You may have seen the same on a lot of websites these days.

The following example fix the navbar to the top:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <META charset="utf-8">   <meta name="viewport" CONTENT="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="height:1200px"> <nav class="navbar navbar-default navbar-fixed-top">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">New Website</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">AboutUs</a></li>       <li><a href="#">Company</a></li>       <li><a href="#">Services</a></li>       <li><a href="#">Contact</a></li>     </ul>   </div> </nav> </body> </html>

The output displays the navigation bar fixed at top. Notice the scrollbar on the right. The changes in the scrollbar won’t affect the position of the navigation bar at the top:


Discussion

No Comment Found

Related InterviewSolutions