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 Lauren Clark
Lauren Clark
33,155 Points

Bootstrap Navbar Collapse - Not Collapsing properly.

The Problem: Navbar STARTS as open. On collapse, the links still show, only the background collapses.

What it looks like default

What it looks likes closed

My Code:

<body>
  <!--Navbar -->
      <div class="contactUs">
        <p>
          <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;01268 752298</p>
      </div>
      <!-- logo -->

      <!-- end logo -->
    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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 main-logo pull-left" href="index.html">SX Storage Essex Benfleet</a>
        </div>
        <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav navbar-right">
        <li><a href="#selfStorage">Self Storage</a>
        </li>
        <li><a href="#businessStorage">Business Storage</a>
        </li>
        <li><a href="#">Prices</a>
        </li>
        <li><a href="#">Packaging </a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

  <!-- End navbar -->

The CSS is the bootstrap css and a few custom styles. I've included the same Javascript that is included in the first part of the Bootstrap tutorials, the ones where Guil goes over the dropdown menus.

So confused! :S

James Barnett
James Barnett
39,199 Points

Create a codepen with all on your HTML & CSS as well as any CSS/JS you linked in from bootstrap.

3 Answers

James Barnett
James Barnett
39,199 Points

@Lauren Clark -

Looks like the bootstrap CSS isn't linked.

Add in <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css"> and you should be good to go.

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

http://codepen.io/Deadlymuffin/pen/ukzfv

@.@;;;

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

Well I'll be... I tried it with the bootstrap CSS CDN - and it's working fine. Its messed up some styling but that is easier to fix. Something must be missing.

James Barnett
James Barnett
39,199 Points

> Something must be missing

Whenever CSS does weird things, I always double check the HTML to make sure it validates.

In this case, the W3C's HTML5 validator, found a few issues.