Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Andres Barbudo-Rodriguez
Andres Barbudo-Rodriguez
2,663 Points

Off canvas button not working

i just pass the $ as a parameter to the function but seems to not take effect on the sidebar, when i resize the button appears but does not work.

i then downloaded the project files to compare with mine and it doesn't works

may the force be with you and please help me, i want to finish this super course

thank you

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

this is my stylesheet

body {
  padding-top: 50px;
  padding-bottom: 30px;
}

.logged-in .navbar-fixed-top {
    margin-top: 30px;
}

@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: #222;
        padding: 10px 15px;
        width: 200px;
    }

    li:hover .sub-menu {
        display: block;
    }

}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu a  {
    color: #999;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;
}

.current-menu-item > a, .current-menu-parent > a {
    background: #000;
}
.current-menu-parent li a {
    background: inherit;
}
.current-menu-parent .current-menu-item a {
    color: #fff;
    font-weight: bold;
}

.sidebar {
    margin-top: 40px;
}

.widget {
    margin: 10px 0 30px;
}

.widget h4 {
    color: #888;
}

.portfolio-piece {
    margin-bottom: 20px;
}

.featured-image img,
.portfolio-piece img {
    max-width: 100%;
}

.prev-next {
    font-size: 24px;
    margin-top: 30px;
    text-align: right;
}

@media (max-width: 530px) {
    .prev-next {
        margin-top: 35px;
        font-size: 18px;
    }
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

without seeing page.php and sidebar.php I can only guess is, there maybe an issue with the class names. When you click the button in the dev tools do you see the class active being applied to the div?

Andres Barbudo-Rodriguez
Andres Barbudo-Rodriguez
2,663 Points

for sure, look now it's getting creepy, the off canvas button used to appear at the right side and not to work, but now does not appear and i have it on the page.php and the sidebar.php, here is the page.php

sidebar.php (sorry this is theme.js)

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

page.php

<?php get_header(); ?>

    <div class="container" role="main">

        <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(); ?>

        </div>

    </div>

<?php get_footer(); ?>
Jacob Mishkin
Jacob Mishkin
23,117 Points

Okay, its cool. Here is a plugin I always use when developing its called: Show Current Template. this plugin will show you what file is being displayed. ie. page.php, post.php front-page.php its super helpful. this might of been a copy and paste typo but you have the jQuery inside of the the sidebar.php file. That might cause errors if true. to debug this there are several options you can do. First inside of page.php inside the div col-md-9 just write the words TEST and see if its appearing on the page in the browser. I prefer to use the plugin I mentioned earlier to see what files are being used. This way you can see if page.php is in use. If the button is gone, and should be ie at the correct media query check and make sure the site is pulling in page.php.

Andres Barbudo-Rodriguez
Andres Barbudo-Rodriguez
2,663 Points

sorry i made it wrong and now i realize that i didn't posted the sidebar.php oh my god how awkward, now look this is the 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>
Andres Barbudo-Rodriguez
Andres Barbudo-Rodriguez
2,663 Points

im gonna try the plugin and then i'll catch you thank you

S Ananda
S Ananda
9,474 Points
S Ananda
S Ananda
9,474 Points

One suggestion is to clear your cache. I've been having some problems with the local host I'm using and it is not always picking up changes to my CSS. You could have something lingering in your cache that is causing the page to reload from a cached page. Right now I often have to clear my cache multiple times before certain changes show up. Just a thought and painless to try.

Andres Barbudo-Rodriguez
Andres Barbudo-Rodriguez
2,663 Points

thank you, i already tried, and it just disappeared, i'm recovering my steps through each video to check that everything does work properly