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.

CSS Framework Basics Build a Website with Foundation Building the Top Bar

Chad Pjontek
Chad Pjontek
13,700 Points

Building a Website with Foundation - Building the Top Bar: Code challenge task 4/5 question

I'm not sure if it's a bug or something I'm missing but the code executes just fine in the editor. I can't seem to get past this one despite changing my code with still working results. Here is an example of one of my code snipets:

<!DOCTYPE html>
<html>

<head>
  <title>Ribbit - A Treehouse Project</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/normalize.css" >
  <link rel="stylesheet" href="css/foundation.min.css">
  <link rel="stylesheet" href="css/my-styles.css" >
</head>
<body>

  <!-- Top Bar -->
  <div class="contain-to-grid"> 
    <nav class="top-bar">
            <ul class="title-area">
        <li class="name">
            <a class="main-logo" href="#">Ribbit</a>
        </li>
        <li class="toggle-topbar"></li> 
      </ul>
            <section class="top-bar-section">
        <p class="right">A Treehouse Project</p>
      </section>
    </nav>
  </div><!-- Top Bar -->


</body>
</html>

2 Answers

Jacob Miller
Jacob Miller
12,466 Points

I'm not familiar with Foundation, but I looked at the documentation and adding the class hide-for-small to the <p> seemed to do the trick.

Chad Pjontek
Chad Pjontek
13,700 Points

Yes I tried this as well just to see if it would pass the code challenge but it does not. That topic was covered in another section and I'm "assuming" it wants you to use the Foundation class for hiding the nav menu (which I have shown in the code above) and not just a generic hide element class.

Chad Pjontek
Chad Pjontek
13,700 Points

Jacob I'm sorry for jumping to a conclusion so fast as your code was "almost" what I entered. I actually tried using the hide-for-small-only class as referenced in the current Foundation 5 documents --> http://foundation.zurb.com/docs/components/visibility.html The hide-for-small class is referenced in the Foundation 4 documents and is apparently what is being used in the video.