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 Setting Up a Bootstrap Slideshow Carousel

the slideshow and the navigation in the portafolio single page are ruined since i add the offcanvas sidebar.

my slideshow and the nav in the single page was perfect!! but when i was doing the off canvas sidear stop working properly i followed the tutorial and im tired of comparing with the downloads! i think it might be the css or the version of something, because to make the toggled bar works i put !important in the css and it works!! the thing is, now, even if i retired the !important from the css (in both positions of the sidebar) is still broken!! :S and if the toggle sidebar is working properly the others dont! help!!! please!! :(

this is where the slideshow is: http://www.evamestre.net/blog/

this is where the nav is broken http://www.evamestre.net/portfolio/img7/

thank you all for yours answers!!! here the css:

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

.admin-bar .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;
    color: #444;
    }

.sidebar h3{
    color: #888;
    }

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

article.post{

    margin: 20px 0 40px;    

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

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

@media (max-width:540px) {
    .portfolio-piece h4 {
        font-size: .8em;
    }
    .prev-next {
        margin-top: 15px;
        font-size: 18px;
    }
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative/* !important*/;
    -webkit-transition: all .25s ease-out;
         -o-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 /*!important*/;
    top: 0;
    width: 50%; /* 6 columns */
  }
}