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

JavaScript

Posted by webdev wannabe
webdev wannabe
45 Points

linking .js - hamburger icon not dropping down

nothing happens when clicking the hamburger icon and I'm thinking my scripts aren't linked properly. it doesn't help that the teacher skipped over it!

all my bootstrap files are in an enclosing folder named "bootstrap"

<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

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

        <a class="navbar-brand" href="#"><span id="logo-text">Brand Title</span></a>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            <li><a href="#">Accommodations + Packages</a></li>
            <li><a href="#">Make A Reservation</a></li>
            </ul>
        </div>
    </div>
</nav>

2 Answers

Richard Hope
Richard Hope
25,237 Points

The jquery.min.js file may need to be loaded before the bootstrap.min.js file. Try cutting the the jquery line and pasting it above the bootstrap line.

webdev wannabe
webdev wannabe
45 Points

thanks for the reply but that didn't work

webdev wannabe
webdev wannabe
45 Points

Actually you were right! the jquery.min.js did need to come first, but I also had an extra / at the beginning.

Should the script links go in the head or body??

Richard Hope
Richard Hope
25,237 Points
Richard Hope
Richard Hope
25,237 Points

You could also try putting the links to the scripts in the footer rather than the header. I guess that's the question you were asking anyway.