Jasny Bootstrap

Base template for Jasny Bootstrap

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script>
    <body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
    
    
    <div class="backdrop"></div>
    
    <div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
    <a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">&times;</a>
     <a id="navToggle" class=""><span></span></a>
      <h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
      <ul class="nav navmenu-nav">
        <li class="active"><a class="nav-link" data-toggle="offcanvas"  href="#january">Enero</a></li>
        <li><a class="nav-link" data-toggle="offcanvas"  href="#february">Msrs</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
      </ul>
  
    </div>

    <div class="navbar navbar-default navbar-fixed-top navbar-preheader">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">navbar brand</a>
      
   
      
    </div>
  
    <div class="container">
      <div class="page-header">
        <h1>Navmenu Template</h1>
      </div>
      <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown...

CSS

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}

.backdrop {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1040;
  display: none;
}

.navbar-fixed-top {

  background:#fff!important;
}


.navbar {
  display: block;
  text-align: center;
}
.navbar-brand {
  display: inline-block;
  float: none; 
}
.navbar-toggle {
  position: absolute;
  float: left; 
  margin-left: 15px;
}

.container {
  max-width: 100%;
}

@media (min-width: 1px) {
  .navbar-toggle {
    display: block !important; background:none!important;  border:none !important; color:#f90 !important;
  }
}

@media (min-width: 992px) {
  body {
    padding: 30px 0 0 300px;
  }
  .navmenu {
    padding-top: 0; 
  }

.navbar-toggle {display:none!important;}
.close {display:none}
  

.navmenu-fixed-left {
  z-index:0;
  top: 48px;
  bottom: 0; background:#fff!important;
}

}

    .navbar-default .navbar-toggle .icon-bar{
       background-color:#333;
    }
    

.close {margin-right:10px; margin-top:10px;}

@media (max-width:991px) {
  
 

.navmenu-fixed-left {
  z-index:1050;
  top: 0;
  bottom: 0; background:#fff!important;
}


}

    .backdrop {display:none}
    
    #january, #february {
      text-transform: uppercase;
      background-color: red;
      text-align: center;
      line-height: 90vh;
      font-size: 5em;
      height: 90vh;
      color: white;
    }
    
    #february {
      background-color: green;
    }

JavaScript

$(document).ready(function () {
  toggleOffcanvas($(window).width() <= 992);
});

// simulate modal opening
$('.nav-link').click(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
  }
  
	$('#navToggle').click();
});

$('.navmenu').on('show.bs.offcanvas', function() {
	if ($(window).width() <= 992) {
		$('.backdrop').fadeIn();
  }
});

$('.navmenu').on('hide.bs.offcanvas', function() {
	if ($(window).width() <= 992) {
		$('.backdrop').fadeOut();
  }
});

// close modal on resize
$(window).resize(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
    $('body').removeClass('bs.offcanvas');
  }
  
  toggleOffcanvas($(window).width() <= 992);
});

// switch active navigation link onclick
$('.nav a').on('click', function() {
  $('.nav').find('.active').removeClass('active');
  $(this).parent().addClass('active');
});

// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
  $('body').removeClass('bs.offcanvas');
});

function toggleOffcanvas(condition) {
	if (!! condition) {
  	$('.nav-link').attr('data-toggle', 'offcanvas');
  } else {
  	$('.nav-link').removeAttr('data-toggle');
  }
}