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 trialJoe Consterdine
13,965 PointsCSS appears to be working, but menu isn't working as shown in the video.
Hi guys,
I've followed everything in the videos but on the video it shows a menu tab and then "portfolio" with CSS styling.
When I load mine the menu is shown in text with no tab and the portfolio isn't showing the same styling.
The fonts do look styled though.
Here is my code:
Functions.php
<?php
function wpt_theme_styles(){
wp_enqueue_style ( 'foundation_css', get_template_directory_uri() . '/css/foundation.css');
wp_enqueue_style ( 'normalize_css', get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style ( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
wp_enqueue_style ( 'main_css', get_template_directory_uri(). 'style.css');
}
add_action ( 'wp_enqueue_scripts', 'wpt_theme_styles');
function wpt_theme_js() {
wp_enqueue_script ( 'modernizr_js', get_template_directory_uri(). '/js/modernizr.js', '', '', false );
wp_enqueue_script ( 'foundation_js', get_template_directory_uri(). '/js/foundation.js', array('jquery'), '', true );
wp_enqueue_script ( 'main_js', get_template_directory_uri(). '/js/app.js', array('jquery', 'foundation_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpt_theme_js');
?>
Header.php
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header class="row no-max pad main">
<h1><a class="current" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<a href="" class="nav-toggle"><span></span>Menu</a>
<nav>
<h1 class="open"><a class="current" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<ul class="no-bullet">
<li class="current parent"><a class='current' href="index.html">Portfolio</a>
<ul class="sub-menu">
<li><a href="item.html">Portfolio Item</a></li>
<li><a href="item.html">Portfolio Item</a></li>
<li><a href="item.html">Portfolio Item</a></li>
<li><a href="item.html">Portfolio Item</a></li>
</ul>
</li>
<li class="parent"><a href="blog.html">Blog</a>
<ul class="sub-menu">
<li><a href="single-post.html">Single Post</a></li>
<li><a href="author.html">Author Page</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Footer.php
<div class="footer-clear"></div>
<footer class="row no-max pad">
<p>Copyright <?php echo date('Y');?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Thanks Joe :)
2 Answers
Joe Consterdine
13,965 PointsI figured it out in the end.
The problem was there was no '/' infront of my 'style.css'.
So my question is this, why do we need that '/' front of our folders?
I was wondering this before, it seems like the it's completely necessary, but obviously it isn't haha.
Why do we need it?
Thanks
Heidi Bada
14,197 PointsThank you Joe, that helped me too. In the functions.php file, the enqueue line that brings in style.css is:
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css');
All of a sudden my notes work correctly and my site looks like the one in the video.
Joe Consterdine
13,965 PointsGlad to hear Heidi :)