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!

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 Create Bootstrap Styled Theme Templates Creating a Static Page Template with Sidebar

S Ananda
S Ananda
9,474 Points

CSS does not appear to be working.

for some reason my CSS isn't working for the current task. It appears to be working for all the nav stuff I've entered, but not a simple margin change. Since I'm having to use a local host for this course here's the sidebar.php code:

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

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

    <h3>Sidebar Setup</h3>
    <p>Please add widgets to the page sidebar in order to have them display here.</p>

<?php endif; ?>


Here's the CSS code. I'm including all of it, since there might be a problem with the coding someplace earlier in my page. This is the styl.css page:

`` /* Theme Name: bootstraptowp Author: Sadaajit Ananda Author URI: http://sadaajit.com Description: Example theme for Treehouse course on how to convert static Bootstrap site into dynamic WordPress theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bootstrap-to-wp

This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */

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; }``

S Ananda
S Ananda
9,474 Points

Never mind. I decided to see if it was a caching problem and as soon as I cleared my cache it started to work. I've got caching turned off on my local host, but Chrome isn't listening...