we are currently looking at redesigning one of our sites so it is responsive. The problem is the site generally has two large menu systems per page. One at the top as the main navigation and then a left side navigation which has all the pages for that section which is generally also quite big. Basically trying to figure out the best way of dealing with this.

I haven't been able to find any example of people doing this with Resposnisve . I've found sites with a lot of content like Boston Globe but nothing with two large menus. Anyone got any suggestions?

  • 2
    Maybe you need to consider the IA of the site while you're making it responsive. There is more to responsive design than just 'making the desktop site display on an iPhone', you need to think of the actual content that is present and determine how best to organise it so that it can be easily located for anyone using any device. If your site architecture is so wide then it may not be ideally suited to mobiles anyway as all you'll be showing on the mobile is long lists of navigation options.
    – JonW
    Commented Feb 20, 2013 at 11:40

2 Answers 2


Aside from rethinking the IA so that your content is more desciverable on mobile devices anyway, perhaps you could use the follow approach - one that I've gone with in the past.

There will be a primary menu where the top-level categories exist. While these are present on the 'desktop' site at the top as standard when you get to mobile size then revert that to a menu button (a.k.a. the 'hamburger menu', apparently).

This is a separate menu to the sub-menu on the desktop site, so it should still be separate on mobile. It allows users to quickly jump to the top-level of whatever area of the site they want to get to.

For the submenu, I have taken to moving this down to the bottom of the page, and have an anchor link at the top to take the user to that menu. The reasoning for this is that it's the content on the page that is important, not the sublevel navigation.

Provide a clear link to the sublevel navigation at the top of the content and then that will take the user down to the bottom where they can see all the subpages within that section. If you need to show sub-sub levels here too then this should also work, although bear in mind the more sublevel pages there are per section the larger this list of pages is going to be - you'll just be presenting a large list of pages to the user, no actual valuable content at that point.


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

The primary message here is that - Content is more important than navigation. Yes, they need to navigate around, but keep the navigation where they can find it easily rather than showing it to them all the time when the chances are they just want to read the actual page.

(Not to mention that if you were to show the whole navigation at the top of the content on mobile nobody visiting the site would ever see the page state update because it'd jump from one page showing loads of navigation to another pages showing navigation, with the content hidden well 'below the fold')

  • This is a good approach. The site I'm working on now has 750,000+ pages and navigation that goes 8 levels deep in some sections. In the desktop view, we've got a mega-nav menu that goes 4 levels deep. The section-level nav is uneven, sometimes handled (badly) by tab sets, other times by CTAs and other ad hoc elements that don't translate very well to the small screen. This patter would work better.
    – RobC
    Commented May 19, 2015 at 19:27

When your creating a responsive design you want to limit your content so it's readable on a mobile device but also allows the user to find the information they are looking for. Smashing Magazine has a great example of a responsive layout in that at a higher screen resolution users can view more detailed content while at the mobile level users can find categories through the drop-down (which holds both top and side levels of navigation) located at the top and if all else fails there is a search option. Smashing Magazine organized their drop-down navigation to with Sub Headers (top = smashing categories and side = smashing sections) Screen captures are displayed below showing the difference in screen resolutions.

Smashing Magazine Large Resolution

smashing magazine monitor size

Smashing Magazine Mobile Resolution

smashing magazine mobile size

You could also look into Brad Frost Responsive Layout Patterns Site which provides vast amounts of information and guidance in approaching responsive layouts (Patterns, Resources and News). The Resources section is full of examples you may find very helpful with the creation of your responsive navigation!

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.