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.
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.
Hope I was clear
What do you think?? Thank you