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

Posted by seanrobinson
seanrobinson
4,945 Points

Bootstrap Mobile Navigation Troubles

So when I toggle the mobile navigation bar, it starts from the top of the viewport instead of the bottom of the navbar. How can I fix that?

P.S. It also does it on the provided "finish" code.

P.S.S. Here's my HTML: http://codepen.io/anon/pen/jHFmD

UPDATE: I tested it on my phone, and it works perfectly. Odd. They both use Chrome. Though the only thing that really matters is that mobile mode works on mobiles, I am still curious why this problem occurs.

4 Answers

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey,

Compare your HTML with the example here: http://getbootstrap.com/components/#navbar

Wrap the .navbar-toggle and .navbar-brand into a div with the class .navbar-header, it should solve your problem.

Hope I could help!

Joshua Bivens
Joshua Bivens
8,586 Points
Joshua Bivens
Joshua Bivens
8,586 Points

This worked! Weird...

Matt Wildman
Matt Wildman
2,561 Points
Matt Wildman
Matt Wildman
2,561 Points

I've come up with the same problem. Matt Vegetable's solution doesn't seem to help.

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

I just reviewed the video, and I think I see your problem now. It's weird because it works properly in the video, but if I use the same HTML it does not.

However if you do as I wrote in my first answer, it should work.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks Matt. This did work for me. Can you explain exactly what that class does? Is it just a clearfix?

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

I'm glad I could help! Yes, you are right, both the .navbar-toggle and .navbar-brand has a float property which causes a collapsing issue. The .navbar-header holds the properties that solves the issue as well as the .clearfix class.

I don't know how it could work in the video by the way.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Great. Thanks Matt. Yes, it's strange that it worked for Guil without something like this in place.

Hot Bricks Employee
Hot Bricks Employee
10,991 Points
Hot Bricks Employee
Hot Bricks Employee
10,991 Points

Hello All,

I too came across the same problem. I went ahead and wrapped the code in a div with the class navbar-header like below and it dropped the menu links down. Thanks @Matt Vegetable. Cheers!

<div class="navbar-header"> <!-- Begin div --> <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 text-muted" href="#">Ribbit</a> </div> <!-- Close div -->