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

Design

How to create Drop down menu that can be open in mobile devices.

I have added a navigation bar on my website but when I tried to open it in the mobile it get deformed.

How can I create a proper drop-down list.

Rebecca Riley
Rebecca Riley
Courses Plus Student 2,265 Points

Have you considered using bootstrap? They have a way to implement navigation so that it's responsive - see https://v4-alpha.getbootstrap.com/components/navbar/.

Christian Lawrence
Christian Lawrence
3,941 Points

Sounds like you need to use some media queries with Javascript (or jQuery) to show and hide a 'Menu' button.

First, have using CSS media queries have your navigation bar display in a vertical mobile format Then create a 'Menu' button in HTML and have it only display on mobile again using CSS media queries. Finally using Javascript or jQuery (easier) have the navigation menu show and hide when the 'Menu' button is pressed.

If look into 'hamburger menu' you'll get a few examples of how to do this. Try the HTML forum if you're still stuck.

1 Answer

But how can I create a sub menu list. That I was not able to create. Which is responsive to mobile too.