B3 - Bootstrap 3 Navbar v1.2 · Created and documented by Haundo Studio
B3 - Bootstrap 3 Navbar
Thank you for purchasing this item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
1. Content - Top
b3navbar.zip
├─ css
│ ├─ b3.css
│ ├─ b3_default_icons.html
│ ├─ b3_default_text.html
│ ├─ b3_default_text+icons.html
│ ├─ b3_inverse_icons.html
│ ├─ b3_inverse_text.html
│ └─ b3_inverse_text+icons.html
├─ css+js
│ ├─ b3.css
│ ├─ b3.css
│ ├─ b3_default_icons.html
│ ├─ b3_default_text.html
│ ├─ b3_default_text+icons.html
│ ├─ b3_inverse_icons.html
│ ├─ b3_inverse_text.html
│ ├─ b3_inverse_text+icons.html
│ └─ b3.js
├─ js
│ ├─ b3.css
│ ├─ b3_default_icons.html
│ ├─ b3_default_text.html
│ ├─ b3_default_text+icons.html
│ ├─ b3_inverse_icons.html
│ ├─ b3_inverse_text.html
│ ├─ b3_inverse_text+icons.html
│ └─ b3.js
├─ assets
│ ├─ html5shiv.js
│ └─ respond.js
├─ quickstart.html
└─ readme.html
The navigation bar comes in three different versions organized in different folders: css, js and css+js. The css folder contains 3 different styles and 2 color variation of the navbar and the css for the style, it works only with css. The js folder contains 3 different styles and 2 color variation of the navbar and the js for the navigation bar, it works only with jQuery. The css+js folder contains 3 different styles and 2 color variation of the navbar, the css and jQuery for the navigation bar. It combines css and js and it's ready to work in any bootstrap based website
2. Navigation bar structure - Top
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<!-- Dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li class="divider"></li>
<li role="divsentation" class="dropdown-header">Dropdown header</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
<!-- E-mail dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Messages <span class="badge">14 </span><span>
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Compose Mail</a></li>
<li><a href="#">Inbox <span class="badge">10</span></a></li>
<li><a href="#">Starred <span class="badge">1</span></a></li>
<li><a href="#">Important</a></li>
<li><a href="#">Drafts <span class="badge">2</span></a></li>
<li><a href="#">Sent Mail</a></li>
<li class="divider"></li>
<li><a href="#">Spam</a></li>
<li><a href="#">Trash <span class="badge">1</span></a></li>
</ul>
</li>
</ul>
<!-- Login form dropdown -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login</a>
<ul class="dropdown-menu">
<form class="navbar-form" role="search">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</ul>
</li>
<!-- Search form dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Search</a>
<ul class="dropdown-menu">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</form>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav><!-- /.navbar -->
This is the structure used to display the navbar. It uses Bootstrap 3 to display that way. There are 3 types of navigation bar available: just text, text + icons or just icons. Each navbar is separated from the other and they have a comment above indicating which type is it. The navbars come with 2 different colors based on Bootstrap's navbar-default and navbar-inverse classes. Select between default or inverse navigation bar and if you want it with just text, just icons or icons + text. It's possible to change the display of any navbar including adding some code from Bootstrap 3:
- Add navbar-fixed-top or navbar-fixed-bottom to <nav> tag to make the navbar stay always on top of any content even when scrolling up or down.
- Wrap all the code within <nav> tag into a <div class="container"> tag to make the navbar shorter and fit the container.
- Wrap all the code below <nav> tag inside a <div class="container">
tag to keep the full width of the navbar but narrow the content.
For more information about Bootstrap 3 Navbars visit http://getbootstrap.com/components/#navbar
3. CSS Files - Top
If you want to change the background color to the navbar to match your website, find this line into the CSS file ( you edit b3.css into cs or css+js folder ) for the default navbar:
.navbar-default {
background: #00CFAF;
}
If you want to change the background color to the inverse navbar:
.navbar-inverse {
background: #34495E;
}
Note that this lines only changes the background color of the navbar. To change the rest of elements you must change all the corresponding colors. You can use a text editor to find a color and replace it to make this process more easy.
4. jQuery File- Top
jQuery is a Javascript library that greatly reduces the amount of code that you must write. When using the js or css+js version of the navbar it will work like into a website, making links active when clicked.
To change the background of the default navbar ( you must edit b3.js inside js folder ):
$('.navbar-default, .navbar-default .dropdown-menu').css('background', '#00CFAF');
If you want to change the background color to the inverse navbar:
$('.navbar-inverse, .navbar-default .dropdown-menu').css('background', '#34495E');
Note that this lines only changes the background color to the navbar. To change the rest of elements you must change all the corresponding colors. You can use a text editor to find a color and replace it to make this process more easy.
5. Internet Explorer compatibility- Top
There are some related issues when using Bootstrap 3 in Internet Explorer 9 or less. In this navbar bootstrap files are loaded by CDN, but if you're using Internet Explorer 9 or less, you need to download a copy of Bootstrap 3 and add bootstrap.css and bootstrap.js to the html file you are using. Replace this lines, where X is the latest version of Bootstrap 3:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.X.X/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.X.X/js/bootstrap.min.js"></script>
For the following lines:
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
This navbar also includes two files that are necessary when using IE9 or less: html5shiv.js and respond.js. This files are into assets folder and allows Bootstrap 3 to render properly in this browsers. This files are only used in the jQuery version of the navbar.
There is another issue with the dropdown buttons not working in this browsers. To make them work you need to comment out all the lines containing the following code in the divviously downloaded file bootstrap.css:
filter: progid:DXImageTransform.Microsoft.gradient
6. Features- Top
This navbar enables submenus for Bootstrap 3, a feature that was removed from Bootstrap 3 but was divsent in divvious Bootstrap versions. To add a submenu to a link inside a menu, add submenu class to the item list and then add the dropdown menu as normally:
<li class="dropdown-submenu"><a href="#">Options</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
7. Sources and Credits- Top
For more documentation about used frameworks and live demo:
Bootstrap 3 ·
jQuery ·
B3 - Bootstrap 3 Navbar Live Demo
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Fokkusu
Go To Table of Contents