Tutorial by Examples

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <!--- vvv Hamburger icon that gets shown when window reaches a certain scale vvv ---> <button type...

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".n...

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".n...

// Add active class to active navigation link $(document).ready(function () { $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]') .closest('li').addClass('active'); });

max-width is the breakpoint @media (max-width: 1200px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transpar...

jQuery('body').bind('click', function(e) { if(jQuery(e.target).closest('#navbar').length == 0) { // click happened outside of .navbar, so hide var opened = jQuery('.navbar-collapse').hasClass('collapse in'); if ( opened === true ) { jQuery('#navbar2 .navb...