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

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

Chad Pjontek
Chad Pjontek
13,700 Points
Posted by 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
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
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
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.