Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress From Bootstrap to WordPress Add Bootstrap Components to WordPress Theme Adding Off Canvas Content to a WordPress Theme

Off Canvas content button not working

For some reason, this code isn't working for me. I'm using the same CSS, JS, and the same page with the sidebar, but when I resize the browser, the button appears, but the sidebar content just slides down below the content to its left. And the button is not clickable. I'm not receiving any JS errors in the Console. I also checked that my theme.js file is "enqueuing". I have other JS in my theme.js that's working. Any help would be appreciated.

4 Answers

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.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

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

Thanks for the quick response. I got it to work. I just added !important to both the "position: relative" and "position: absolute" property values and it works just fine. So there must have been a rule with more precedent somewhere. I used the Bootstrap Carousel Template for this tutorial, so maybe it's slightly different from the Jumbotron Template. Either way, I got it to work. Thanks again and I really enjoyed this tutorial!

Andrew

Neil Doherty
Neil Doherty
10,008 Points

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

Elaine Oglesbay
Elaine Oglesbay
19,264 Points

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.