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

HTML

Posted by Jonathan Sebastiao
Jonathan Sebastiao
14,271 Points

Bootstrap Navbar Menu Help

I am having a headache with this responsive navbar in bootstrap. I seemed to copy the code provided by Bootstrap and although my navbar shrinks it basically goes invisible and I don't even see the hamburger menu. Plus inside my menu I don't have my list links displayed as block as bootstrap has it in it's example.

Here is my forked workspace : https://w.trhou.se/ek5h4fz3vb

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Unfortunately, the link that you provided is private to just you. So to be able to view your workspace and fork it ourselves, we're going to need you to link a snapshot. This can be done by using the camera icon on the upper right-hand side of your workspace! :sparkles:

Jonathan Sebastiao
Jonathan Sebastiao
14,271 Points

Okay Jennifer Nordell I corrected my link

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Well, what I can tell you right now is that I see this line:

<a class="navbar-brand" href="#"><img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="Tech Talks"></a>

This points to an svg file that is not present in your current file structure. There should be an assets directory with a brand subdirectory, but I cannot see it in the workspace. Also, I cannot find that svg file anywhere.

Jonathan Sebastiao
Jonathan Sebastiao
14,271 Points

When I copied over the bootstrap template I didn't get the logo and having a broken image didn't bother me since I am still finalizing the logo. I had a image in it's place for time being but removed it. Even when I had the image that didn't seem to make the navbar work like Bootstrap showcases. This is driving me nuts I watched tons of videos and copied the code over and over but yet it just won't work.

1 Answer

Joe Schultz
Joe Schultz
6,191 Points
Joe Schultz
Joe Schultz
6,191 Points

Your nav bar is going invisible because the button class is set to hidden. You need to change 

<button class="navbar-toggler hidden-lg-up"

to 

<button class="navbar-toggle collapsed ham"

Hope this helps.

Jonathan Sebastiao
Jonathan Sebastiao
14,271 Points

So apparently the problem is Bootstrap 4 drop glypicons and all I had to do was add ☰ in between the button

         <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        &#9776;
      </button>
          ```