0

I am trying to figure out how to make an off canvas nav (slide in from the right) with Bootstrap 3, but the toggle only to show when the viewport is less than 992px and the normal bootstrap nav to show when the viewport is bigger than 992px.

jasny-bootstrap is a good start but I cant figure out how to show the normal Bootstrap nav when the viewport is bigger than 992px, also I want to use the least amount of JS without having to include a whole library.

I have made this fiddle from the bootstrap off canvas page but still cant figure it out. http://www.jsfiddle.net/UWP5V

It is achieved using the following code

$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
Simon
  • 653
  • 3
  • 14
  • 25

2 Answers2

2

Showing / hiding the navbar is completely done in CSS using @media queries. The size at which the navbar will collapse is defined as less variable @grid-float-breakpoint-max.

To change it, go to the Bootstrap customizer, enter a value for @grid-float-breakpoint-max and download the customized Bootstrap.

Jasny Bootstrap offcanvas should simply work with the modified setting.

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
0

You would use BS responsive utilities for that http://getbootstrap.com/css/#responsive-utilities

See your sample modified

http://jsfiddle.net/freedawirl/wL4d7m3w

Available classes Use a single or combination of the available classes for toggling content across viewport
breakpoints.

Extra small devices = Phones (<768px) use .visible-xs or .hidden-xs
Small devices = Tablets (≥768px) use .visible-sm or .hidden-sm  
Medium devices = Desktops (≥992px) use .visible-md or .hidden-md    
Large devices = Desktops (≥1200px) use .visible-lg or .hidden-lg

Adjust the following as needed

<!-- Desktop Nav -->
<div class="navbar navbar-fixed-top navbar-inverse  visible-sm" role="navigation">

<!-- Mobile Nav -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas visible-xs" id="sidebar"  role="navigation">

 <!-- So that list shows up with nav call -->
 <div class="list-group visible-xs">
freedawirl
  • 19
  • 3