Bootstrap Navbar is the one of most prominent feature of Bootstrap; this is a nice feature of websites. These navbars are resosnsive 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.
Default navbar
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.
Following example demonstrates this:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Responsive navbar
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 first element, data-toggle, is used to indicate the JavaScript that what action should work with the button.
- 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.
Following example show this:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Forms in navbar
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:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Buttons in navbar
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:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit Button</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
Navbar Button
</button>
</div>
</nav>
Text in navbar
Apply this class .navbar-text on the container element of the text. Mostly the container for text is used with <p> tag for proper leading and color. This code of example you can try to see the result.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<p class="navbar-text">Signed in as Khizar</p>
</div>
</nav>
Non-nav links
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:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<p class="navbar-text navbar-right">Signed in as
<a href="#" class="navbar-link">Khizar</a>
</p>
</div>
</div>
Component alignment
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:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<!--Left Align-->
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<button type="submit" class="btn btn-default">
Left align-Submit Button
</button>
</form>
<p class="navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default">
Right align-Submit Button
</button>
</form>
<p class="navbar-text navbar-right">Right align-Text</p>
</div>
</nav>
Fixed to top
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:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Fixed to bottom
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:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Static top
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.
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Inverted navbar
If you want to create navbar with inverted colors like white text and black background, simply add inverse word in css class like this .navbar-inverse.
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPalace</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Android</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Bootstrap Navbar
No comments:
Post a Comment