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

Nora Humpage
Nora Humpage
1,280 Points

I was not able to get the mobile stacked hamburger-style nav menu to expand into a dropdown menu when I toggled it.

I downloaded the source code and when I opened it on my browser at home -still no toggle menu showing up in the mobile view. Do I need to install something on my computer to get that effect? ( I didn't install anything- I have just been using the source files.) I put in the links to CDN mentioned in video #1 - but still no dropdown even when using Guil's source file. Any idea what I am doing wrong? Thank you!

2 Answers

John Lukacs
John Lukacs
26,806 Points

!```html <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>NBoom Boom</title> <link rel="stylesheet" type="text/css" href="header.css"/> <link rel="stylesheet" href="normilize.css" type="text/css"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<link rel="stylesheet" href="application.scss" />

<link rel="stylesheet" href="http://i.icomoon.io/public/temp/c1369df264/UntitledProject/style.css"> </head>

<body> <div class="navbar-toggle navbar-brand navbar-header"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header navbar-brand navbar-toggle"> <button type="button" class="navbar-toggle navbar-header" 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 text-muted" href="#">Ribbit</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Rates</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="#">Portfolio</a> </li>

</ul>

</div> </div> </div> </div>

<div class="container">

<div class="jumbotron"> <h1>Delta tree Service</h1> <p class="lead">cutting tress in the Gta since 1984</p>

</div>

<div class="row"> <div class="col-sm-4"> <h2> Manage your property</h2> <p> We have all your tree cutting needs. Manage your property with a skilled profesional</p> </div> <div class="col-sm-4"> <h2> Maintain your property</h2> <p> Have hedges or just need to prune a tree we can help</p> </div> <div class="col-sm-4"> <h2> Storms or downed tree removal</h2> <p> We can help you get your property looking like it should after a storm</p> </div> </div> </div> <!-- Latest compiled and minified JavaScript -->

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </body>

</html>

S Alexander
S Alexander
18,962 Points

Hi, Nora. Can you post the code? I've fixed a problem with this description before, but without the code, I can't tell if it's really the same problem (and so if my solution would be helpful to you).

Alex