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

Marc Spears
Marc Spears
1,680 Points
Posted by Marc Spears
Marc Spears
1,680 Points

Navigation Menu CSS Problem

Hi,

I'm having nothing but problem after problem in the Wordpress Theme courses, I guess that's the learning by doing motto, huh? :) I was hoping someone could point me in the right direction regarding the formatting of menu items.

Here's what it looks like when I select to view the menu:

http://i649.photobucket.com/albums/uu219/Marc_Dustin_Spears/ProblemMenu_zpswrqtz6ci.png

(You can see the Menu nav items in the upper left hand corner, obscured by the Site logo)

I'll list out the code below, any assistance would be highly appreciated. Thanks!

functions.php

<?php

add_theme_support( 'menus' );

function register_theme_menus() {

    register_nav_menus( 
        array(
            'primary-menu' => __('Primary Menu', 'treehouse-portfolio' )
        ) 
    );

}
add_action( 'init', 'register_theme_menus' );


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.min.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 <?php body_class(); ?>>
    <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>

    <?php 

      $defaults = array(
        'container' => false,
        'theme_location' => 'primary-menu',
        'menu_class' => 'no-bullet'
        );

      wp_nav_menu( '$defaults' );

    ?>
<!--
    <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>

index.php

<?php get_header(); ?>

<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">

    <?php if ( have_posts() ) : while (have_posts() ) : the_post(); ?>

      <h1><?php the_title(); ?></h1>
      <p><?php the_content(); ?></p>

      <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria' ); ?></p>

    <?php endif; ?>

    </div>
  </div>
</section>





<?php get_footer(); ?>

page.php

<?php get_header(); ?>

<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">

    <?php if ( have_posts() ) : while (have_posts() ) : the_post(); ?>

      <h1><?php the_title(); ?></h1>
      <p><?php the_content(); ?></p>

      <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no pages found' ); ?></p>

    <?php endif; ?>

    </div>
  </div>
</section>





<?php get_footer(); ?>

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Marc,

Have you managed to get to the bottom of this yet ?

Theme development is a big step on the WordPress ladder but it is highly rewarding to see one working.

Craig

Marc Spears
Marc Spears
1,680 Points
Marc Spears
Marc Spears
1,680 Points

Hey Craig, thanks for getting in touch. No, I haven't been able to get to the bottom of this one yet, unfortunately. It's been a wild ride thus far, really looking forward to seeing how it all fits together at the end. :)

Craig Watson
Craig Watson
27,930 Points

Hi Marc,

I have had a good look through all your code and cant seem to spot anything that would make this happen.

Last week however I had a little trouble getting the wp_nav_menu to accept container false which was throwing off all my css.

Have you have a look with the inspector to see if it is actually removing the default div it wraps it in?

What was happening to me what that it was continuing to wrap the nav even with container as false and applying my menu class to that div :S

I could not figure out why but luckily I was not working with a framework and could simply make the changes to my CSS.

Let me know if the container is not being removed?

If it is the case th WordPress stack exchange may well be the place to go with this one as there is tons more poeple working with WordPress on there and I can point you to where you need to be :)

Craig