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
Gabriel E
8,916 PointsAnyone have any ideas for a responsive Bootstrap nav design?
I'm working on a website that has about 8 navigation elements. Its too hard to get them to look nice when the browser is resized down to that of an ipad/iphone. I'm thinking it would be nice to have the navigation <a>s change into the classic 3 horizontal lines, then when I click it, it would bring up some sort of over-laying translucent panel. I've looked on StackOverflow and W3Schools, but it all seems really hard for me to apply to my website for styling in my css page. Is there anyway to include this code in my html, and then put the responsive css code in my css breakpoints file so it knows when to execute? (It doesn't necessarily have to be Bootstrap.) Thanks!
~ Gabriel
2 Answers
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsYes, you can use Bootstrap for the whole site or you can style part of the page with an external style sheet. But you can do quite a bit with just Bootstrap. The responsive Navbar does the majority of it for you though. If you want to create a responsive navbar with just CSS then you should check out the site that w3schools puts out.
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsI've used a responsive Navbar which does what you're talking about. You will need to resize the page to see it change in the mobile view. Scroll down to the bottom of the page. There is some extensive reworking of your code that is required for it to work.
Good luck
Gabriel E
8,916 PointsSo is it actually possible to implement a Bootstrap nav bar into just plain css breakpoints?
Gabriel E
8,916 PointsGabriel E
8,916 PointsAwesome! Thanks a lot! Also, I was just doing a few Google searches and I found a great Treehouse blog on CSS designed responsive navbars. http://blog.teamtreehouse.com/create-an-absolute-basic-mobile-css-responsive-navigation-menu
Gabriel E
8,916 PointsGabriel E
8,916 PointsRussell, Sorry for the multiple questions, but I just followed the w3schools link you posted, and I'm finding it really helpful. The one thing I don't understand is where the JS file is supposed to go and if I need to attach it to index.html.