My website uses 2 different menus. One is the main one that user uses for navigating on the webpage. But since every subpage can be quite long I created another menu and depending on which item user clicks, the page will jump to that section.
It works perfectly on big screen. But on smaller screen (phones). The menu gets put below the content and I guess it is completely useless. Any ideas how to implement this menu so users on phone will have easier time jumping on the page.

1 idea i thought of is that I could put the 2nd menu inside the hamburger menu where main menu sits. I could give a different color so user know they are different. What do you guys think?

I hope I made it understandable and sorry for grammar errors since English is not my 1st language.

  • 2
    Could you post a screenshot of both situations?
    – Alvaro
    Commented Jan 5, 2017 at 12:53

1 Answer 1


You could use an accordion menu, where each section is collapsable. This way the user can more easily keep the overview of the content - he does not have to scroll to the top of the page in order to get an overview.


download bmml source – Wireframes created with Balsamiq Mockups

Here is a demo of the control: http://mobify.github.io/bellows/

Wikipedia uses a similar layout for mobile pages. If you open an article with your smartphone the sections are initially collapsed.

  • Hello, thanks for your idea. When I find time to work on the project again. I'll build a quick prototype to see if idea would be usable on our webpage. Will report back :)
    – Kristjan
    Commented Jan 9, 2017 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.