I have a layout similar to the below screenshot. Where the top nav will get collapsed using hte Twitter Bootstrap Nav Collapsed. Also i have a secondary menu below the nav bar on the left hand side which is important for the navigation.

Which is the best way to hand the same on a Tablet and Phone sized Screens?


2 Answers 2


Amazing how I've never thought about this 'conundrum' before, but it's intriguing. Here are the possible solutions I could come up with:

Two menu buttons
My first thought was to put the sub nav off-canvas to the left. Leaving you with a menu button on the right for a dropdown menu of the main nav and a menu button on the left for the off-canvas sub nav. But that's the whole problem with it, it leaves you with two different menu styles which is confusing at the least. You could solve this with a secondary header and another drop down menu.

Merge navigation
My second thought was to merge the two navigations. You can do this when there is a clear hierarchy with the parent link in the main nav and all child links in the sub nav. The structure will look something like this:

    Billing information
    Account members
    Careers page

This won't work when the links in the subnav have nothing to do with the links in the main nav. This would however be my pick and would even advice revising your navigational structure.

Leaving subnav visible
The last solution I could think of is leaving the subnav visible on the page, but changing it to a horizontal, smaller navigation. This will put more distance between the content and the main header with the main menu so it might not be preferable for you.

Here is some further reading:
Responsive design Pattern for secondary navigation - is there a way not to swamp the user?


One solution would be to collapse the Primary Nav, as you currently have planned and to simply stack the secondary nav items.

enter image description here

The reason for this approach is given that there will be numerous actions involved in most of those items such as text input, dropdowns, saving, etc., you'll want to make use of the little real estate you have available, but yet allow the user to focus on one thing at a time.

  • which software do you use to create the mockups?
    – Harsha M V
    Oct 31, 2015 at 21:41
  • This was done in balsamiq mockups
    – jnmnrd
    Nov 2, 2015 at 20:15

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.