Bootstrap Navbar is the one of most prominent feature of Bootstrap; this is a nice feature of websites. These navbars are responsive that provide navigation headers for your website or application. When you open your website in mobile these navbars collapse and become horizontal as the available website width increases.
How to make a default navbar use following steps.
Add these classes .navbar, .navbar-default on the <nav> element.
Also add the role=”navigation” to the above tag just for help with accessibility.
Make a <div> and add a header class .navbar-header. Also put an <a> tag with class .navbar-brand. You will get the text a little larger size.
Now add the links to the navbar, simply use <ul> tag with a classes of.nav, .navbar-nav.
To make responsive to the navbar; the content which you want to make responsive that needs to be wrapped in a <div> with these classes .collapse, .navbar-collapse. The collapsing behavior is worked with the button that has the class of .navbar-toggle and then features two data-elements.
The second element, data-target, point out which part of menu to toggle.
Create using the class of .icon-bar what I like to call the hamburger button.
After doing this you can toggle the elements which are in the .nav-collapse <div>. You need to call Collapse plugin of bootstrap for this feature to work.
For implement the forms elements in navbar use .navbar-form class for proper vertical alignment and collapsed behavior in narrow viewports instead of using the default classes of forms as we have discussed in Bootstrap Forms Tutorial. This code of example demonstrates this:
Buttons can be add by using class .navbar-btn to <button> elements not residing in a <form> to vertically center them in the navbar. Class .navbar-btn can be apply on <a> and <input> tags do don’t use .navbar-btn nor the standard button classes on <a> elements within .navbar-nav. See following example for this:
For those who are using standard links that are not within the regular navbar navigation component, after that use this class .navbar-link to add the proper colors for the default and inverse navbar options as shown in the following example:
Components like nav links, forms, buttons, or text you can align to left or right in a navbar using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. The below mentioned example demonstrates this:
If you want to fix position of navbar on the top, Bootstrap provides also this feature in navbar component. Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content. The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Following example show this:
If you want to fix position of navbar at the bottom of the page, Bootstrap provides also this feature in navbar component. Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content. The fixed navbar will overlay your other content. Following example show this:
If you want to create a full-width navbar that scrolls away with the page, by adding .navbar-static-top and includes a .container or .container-fluid to center and pad navbar content. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.