CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapjasny-bootstrap
Simon
Simon

Reputation: 663

Bootstrap Off Canvas nav toggle in mobile only

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')
  });
});

Upvotes: 0

Views: 7063

Answers (2)

freedawirl
freedawirl

Reputation: 19

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">

Upvotes: 0

Arnold Daniels
Arnold Daniels

Reputation: 16573

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.

Upvotes: 2

Related Questions