"JavaScript Basics (Retired)" was retired on March 27, 2020.

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

Posted by Nils Garland
Nils Garland
18,416 Points

Bootstrap Navigation

Hi! I was just making my website and ran into a problem. When I set my websites size to mobile and the navbar collapses. It's always down no matter what. Does anybody now why? Here's my code.

<nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
             <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">G A R L A N D</a>
            </div>
                <ul class="nav navbar-nav navbar-right">
                    <li> <a href="">HOME</a> </li>
                    <li> <a href="">ABOUT</a> </li>
                    <li> <a href="">PORTFOLIO</a> </li>
                    <li> <a href="">CONTACT</a> </li>
                     <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SKILLS <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Bootstrap</a></li>
                      </ul>
                    </li>
                </ul>
            </div>
        </nav>

Ironic that my skills are bootstrap right? xD

2 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points

It seems that you forgot the div that collects the content for toggling around your <ul class="nav navbar-nav navbar-right">

This should work... 

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">G A R L A N D</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SKILLS <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Bootstrap</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
Ethan Weeks
Ethan Weeks
15,352 Points
Ethan Weeks
Ethan Weeks
15,352 Points 
<!DOCTYPE html>
<html>
<head>
  <title>Test Test</title>
  <!-- Bootstrap's css -->
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' />
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">G A R L A N D</a>
    </div>
     <!-- Bootstrap's id and classes are important for toggle -- this is what you were missing -->
      <div class='collapse navbar-collapse' id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li> <a href="">HOME</a> </li>
            <li> <a href="">ABOUT</a> </li>
            <li> <a href="">PORTFOLIO</a> </li>
            <li> <a href="">CONTACT</a> </li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SKILLS <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Bootstrap</a></li>
              </ul>
            </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Bootstrap JS requires jQuery -- needs to load before Bootstrap's JS -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

  <!-- Bootstrap JS has the toggle action built in  -->
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>