Saved Bookmarks
| 1. |
Fix the navbar to the bottom in Bootstrap |
|
Answer» Fixed Navigation Bar in Bootstrap allow you to fix the navbar at the bottom. Use the .navbar-fixed-bottom class to ACHIEVE the same: <nav class="navbar navbar-default navbar-fixed-bottom">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 bottom. The following example fix the navbar to the bottom: <!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-bottom"> <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 bottom. Notice the scrollbar on the right. The changes in the scrollbar won’t AFFECT the position of the navigation bar at the bottom: |
|