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 Prototyping with Bootstrap Building a Fixed Navbar

Gesang Lamu
Gesang Lamu
2,742 Points

I dont get the hamburger icon, help!

When I click there is a square thing show up but it invisible when I don't click and no dropdown either. Below is my html page, i know it alot but I really want make this work..... :) thanks!

<!DOCTYPE html> <html> <head> <title>Ribbit - A Treehouse Project</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="css/my-style.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->

</head> <!-- navnar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container">

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapes">
      <span class="incon-bar"></span>
      <span class="incon-bar"></span>
      <span class="incon-bar"></span>
  </button>

   <a class="navbar-brand text-muted" href="#">Rabbit</a>
   <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About Ribbit</a></li>
      <li><a href="#">Treehouse</a></li>
    </ul>
   </div>

 </div>

</div> <!-- end navnar -->

<body> <div class="container">

  <div class="jumbotron">
    <h1>Self-destructing message app</h1>
    <p>Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
    <p class="btn-group">
      <a class="btn btn-success btn-lg hidden-xs" href="#">Download the app</a>
      <a class="btn btn-success btn-lg" href="#" >Text me the link</a>
    </p> 
  </div>

<div class="row">
  <div class="col-sm-4 ">
    <h2>jasd jshdh uyw kjd adsj </h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>

  <div class="col-sm-4">
    <h2>jasd jshdh uyw kjd adsj </h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>

  <div class="col-sm-4">
    <h2>jasd jshdh uyw kjd adsj</h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>
</div>

<hr>

<div class="row">
  <div class="col-sm-6 hidden-xs">
    <h3>jas shdhs shdhd iwew hwehe wie </h3>
    <p>wewu iwew iwyeyw  wye ewiw eyw w iyweyw  ew eyw we wue weuweyw 
      hsh  whe wheh wje ehwehw he ihg wj uyh qok uwiq ihggw ihet wjw
      wjwhehw  whehwe </p>

  <div class="row">
    <div class="col-sm-6 col-md-push-6">
      <img class="img-responsive" src="img/decoration.jpg">
    </div>

    <div class="col-sm-6 col-md-pull-6">
      <p> Get access to these course for only 24$ a month</p>
      <a href="#"> visit treehoust &raquo;</a>
    </div>
  </div>
  </div>

  <div class="col-sm-6">
    <h3>jas shdhs shdhd iwew hwehe wie</h3>
    <p>wewu iwew iwyeyw  wye ewiw eyw w iyweyw  ew eyw we wue weuweyw 
      hsh  whe wheh wje ehwehw he ihg wj uyh qok uwiq ihggw ihet wjw
      wjwhehw  whehwe</p>
      <a href="#">Sign up for Treehouse&raquo;</a>
  </div>
</div>

</hr>

  <div>
    <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p>
  </div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body> </html>

You have an extra 'n' in your button.navbar-toggle > span

<span class="incon-bar"></span>

It should be:

<span class="icon-bar"></span>
Gesang Lamu
Gesang Lamu
2,742 Points

thank you so much!

1 Answer

(Accidentally posted this as a comment.)

You have an extra 'n' in your button.navbar-toggle > span

<span class="incon-bar"></span>

It should be:

<span class="icon-bar"></span>