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
Michael Randall
Courses Plus Student 10,643 PointsHow come my navbar-toggle class links do not expand correctly when I click the hamburger icon when browser is xs or sm?
When my browser window is xs or sm and I click the hamburger icons, the links expand but they expand next to the navbar-brand class and not below it.
In the tutorial, when the instructor clicks the hamburger icon, the links appear on a line below the brand/icon. However when I click mine, they appear on the same line but right after the brand/icon. I've been following along with the tutorial, but typing my own content, so, assuming I haven't made mistakes, it should work as it does in the tutorial.
Anyone else experience this problem?
westleyisbell
4,605 PointsI'm having the same problem. Using Chrome and the project files. When reduced to the mobile icon the drop down stays next to the Ribbit and does not drop down. Any specific help is appreciated,
6 Answers
Harry Tran
10,618 PointsReally weird issue I'm getting the same results, with updated version of Google Chrome, it just lined up against the side of the logo.
<EDIT:> https://teamtreehouse.com/forum/navbarbootsrap This is the best answer to how to fix it, you have to wrap everything in another div with class navbar-header. Robert goes on to explain the reasoning really well
Johnny Garces
Courses Plus Student 8,551 PointsHad the same alignment issues with the nav items not being placed underneath the line under "Ribit" logo.
Robert's answer in the link you shared solved it for me. Thanks!
Mirko C
7,865 PointsThanks Harry Tran =)
John Lukacs
26,806 PointsI figured it out add this code to your css
!~~~
@media screen and (max-width: 730px) {
a {
display:block;
}
}
Daniel Maldonado
18,056 Pointsi am using navbar-header and still getting the incorrect results? am i missing something?
tony abat
8,321 PointsI guess we are both missing something because all the solutions listed in this thread and all the rest do not work for me including the "navbar-header" class in bootstrap.
i opened up the "final" file that Gil Hernandez provides as a download with the class but his code doesn't work either.
Nothing more frustrating than the teachers code not working.
I guess i will remove the bootstrap sm and xs and work on the media query in the "mystyles.css" until I get it.
should be good practice.
cameroneckelberry2
8,701 PointsTony, did you ever figure this out?
Jay Valentine
Courses Plus Student 4,389 PointsGuil Hernandez could you offer some help? as i am having the same issue with Google Chrome!, works fine on safari?
John Lukacs
26,806 PointsIts not working for me either
Nick Stoneman
10,093 PointsNick Stoneman
10,093 PointsHey Michael. For me it was an issue of forgetting to add jquery to the top of my page. (I'm using hosted libraries vs downloading it all locally).
However if you're following along using the provided project files you should have jqeury already.
Post a code snippit if you're still stuck.