#bootstrap nav bar

[bootstrapresponsive]

Bootstrap navigation ( Nav bar )

We will move in compliance with the arrangement of the elements in standard html projects from top to bottom. The first element that we study - the navigation bar.

For a review of this element read the information on the official site http://twitter.github.io/bootstrap/components.html#navbar . We will consider in more detail especially nav bar.

Bootstrap provides two basic colors of navbar  light and inverted black. Here class to add if you need black navbar 

  .navbar-inverse

Also, if you want to fix the navigation at the top of the page when scrolling navigation that remained in place, apply the class class="navbar navbar-fixed-top" You can see a live example of a navigation on this site.

More examples: Static nav bar | Fixed nav bar

You can also fixed nav bar at the bottom of the active window to do this apply class class="navbar navbar-fixed-bottom"

Bootstrap  menu adapted for mobile devices. On mobile devices, display links to navigate change, there is a drop down menu. To use it you need the following code

On mobiles and tablets.

When you click on the button -  menu opens

When you create a one-page site with scrolling the screen when you click on a menu item, the default menu bootstrap remains open. To change this, use javascript(jQuery) code

<script>$('.nav-collapse .nav > li > a').click(function(){

$('.collapse.in').removeClass('in').css('height', '0');

});</script>

  Here you can see live example

By default, the bootstrap fixed menu has one peculiarity to be shown on mobile - changing from a fixed to a static display

@media (max-width: 979px){ .navbar-fixed-top, .navbar-fixed-bottom { position: static; } }

To fix this we need to change following style

@media (max-width: 979px){ .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; } }

Change navbar colors and styles

To change navbar menu colors, add style at the bottom of a file in the page header bootstrap.css For e.g.

.navbar-inner { background: #2b2b2b; background-image: none; background-repeat: repeat-x; border-color: none; filter: none; }

Change navbar height

To change navbar height change value min-height: 40px;

.navbar-inner { min-height: 40px; /* change value here*/ }

Change the color of navbar links

You can change the color of menu links replace the code in styles

.navbar-inverse .brand, .navbar-inverse .nav > li > a { color: #999999;/* CHANGE COLOR HERE*/ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .navbar .nav > li > a { float: none; padding: 10px 15px 10px; /* CHANGE HEIGHT HERE */ color: #777777; /* CHANGE COLOR HERE*/ text-decoration: none; text-shadow: 0 1px 0 #ffffff; }