Off Canvas content button not working

Did you check to make sure that the theme.js file looks like Zac showed us:

jQuery(document).ready(function ( $ ) {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});

I don't think you should need to put !important within your style sheet.

Hey! Are you able to post this up somewhere were we could take a look at what's happening?

Hi guys,

I am having a similar(ish) problem with the Off Canvas functionality. The toggle button appears when it goes beyond a certain breaking point, as it should, but then nothing happens when I click on the button.

I followed the tutorial on this a number of times, but I cannot get it work. Even when I use the code from the project files from the tutorial, it doesn't work.

The template works fine without this aspect, but this would be a nice function to have for a website I am building.

HERE IS THE CODE FOR page.php

<div class="row row-offcanvas row-offcanvas-right">

<div class="col-md-9">

        <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs offcanvas-control" data-toggle="offcanvas">Sidebar <span class="glyphicon glyphicon-resize-horizontal"></span></button></p>

     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

         <div class="page-header">  
                    <h1><?php the_title(); ?></h1>
    </div>

            <?php the_content(); ?>
            <?php endwhile; endif; ?>
             </div>

        <?php get_sidebar(); ?>

HERE IS THE CODE FOR sidebar.php

<div class="col-md-3 sidebar sidebar-offcanvas">

<?php if ( ! dynamic_sidebar( 'page' ) ): ?>

<h3>Widget Setup</h3>

<p>Please add widgets to the page widget to have them display here</p>

<?php endif; ?>

</div>

HERE IS THE CODE FOR theme.js

jQuery(document).ready(function ( $ ) {

$('[data-toggle=offcanvas]').click(function () {

    $('.row-offcanvas').toggleClass('active');  
});

});

All help with this would be greatly appreciated.

Thanks, Neil

I had the same problem and I tracked it back to my theme.js file not being recognized. Turns out I had forgotten to place it in my js folder.