Very complex responsive navigation

Question

I'm working on a redesign project that has a complex navigation, especially in the case I have to make it full responsive.

There is a navigation bar to go to several section of the site. Each section is a microsite. The second navigation bar it depends on the section that has been selected. I need to start "Mobile first" and to design the home page of one of the section (let's say Section 1). From mobile site it must be possible to go to other section. But, the main navigation on mobile sites must be the one which contains Sublink in desktop.

I did something like that. I've hidden the navigation behind the hamburger because I want users to focus on search bar. Navigation should be accessibile through hamburger and some quick link in the home page. But the navigation in the hamburger should be the main navigation of the section. I don't want to mix section navigation and navigation of subsection, because sections of this site are very different from each other.

^{download bmml source – Wireframes created with Balsamiq Mockups}

As you can see the desktop site has several section (microsite). Each has its own navigation that works as a mega menu (on hover you will see the 1.x link). I need to make it responsive. I can't delete the search bar or hide it behind an icon. This functionality must be prominent. I could add a second bar after the first one (see example below), but in this way too much space would be busy (at least 120px)and I'm not so convinced about two navigation bar (hamburger for main section and second bar for the sub-section).Furthermore, each sublink in the second bar opens a new menu.

^{download bmml source}

Hope I was clear

What do you think?? Thank you

Answer 1

Something this deep is a challenge on mobile. The standard answer is to make the user page through the levels, and either step back up sequentially when needed or use the slide out menu.

In your case, you're putting some tough constraints on yourself (or the product owner is anyway). I'll focus on these two principals (if I understood you correctly):

1. Search input field must be persistently exposed.
2. The application hierarchy must be visible to the user.

Since I have my sketchbook sitting right here ...

You could use each exposed level of the navigation as a menu of the sibling options in the taxonomy. Personally, I would just leave that to the current lowest level and let the user step back into other levels for it's siblings.

If it were me, I'd collapse the presentation a bit more by skipping straight from the top to the lowest level. A back link would allow the user to step up a level.