Building a responsive drop down menu

Hi all,

Im currently building a massive website using Twitter Bootstrap. The site needs to be responsive. I was wondering about best practise on drop down menus. For example, for desktop users I have a horizontal drop down menu going along the top. The user can hover over the top tier links to see the drop downs, or they can click the top tier links to go to that specific page. However, for users on phones, this doesnt work so well because they have no ‘hover’ function - therefore they click on a top tier link (my horizontal menu has now contracted to a nice responsive menu) and it takes them to that page and there is no way for the user to ‘hover’ to see the drop down links.

What is the best way to deal with this? Should I simply not have my top tier buttons as links? Ive tried to find similar examples on the web to see how other’s have got round this problem, but havnt foudn any relevant website. If someone could point me in the right direction Id appreciate it.


You could try the setup described here:

Size the page down to see what happens on small screens.

Thanks Ralph - thats a really useful site. He’s confirmed my thoughts on the best way forward with the navigation.

Glad it was useful. :slight_smile: there are lots and lots of responsive navigation solutions around, but I quite liked his set of options.