Two row responsive fixed top navbar

I need a response navbar that shows 2 rows (Main menu items and submenu items). Each sub menu will have a different background color. The active menu button will have a matching color to the sub menu to give a tabbed look. The top row (menu row) should collapse when the contents of the page is scrolled beyond a certain point (leaving the sub menu row fixed to the top of the page). The active menu and submenu should be set via a class designation ("active"). When the width of the page is small (mobile) the navbars should collapse to a fixed top dropdown. The top bar will show the app logo on the left and the three icon bars (hamburger) on the right. When expanded the navigation should either show all menu choices (with only the sub menu items clickable)... e.g. Menu 1 Sub Menu A Sub Menu B Menu 2 Sub Menu C Sub Menu D Menu 3 Sub Menu E Sub Menu F Lastly, it is important that the navbars allow for dynamic adjustment (e.g. some users may not have access to certain menus or sub menu items)