Menu icon Foundation
2 level top-bar colors in Foundation 6

I have a site that needs two levels of colors for a top bar and then on the second color containing all of the sub menus. Any ideas? The attached screenshot shows the design. I know how to accomplish this with a top-bar and secondary buttons and then hide the nav for small screens and simply use a different top-bar for the small screens, but I am wondering if I can accomplish this with just one top-bar?

Thanks for the help.

-Scott

Screen shot 2016 02 27 at 10.31.31 am

top-barfoundation 6multi-levels

I have a site that needs two levels of colors for a top bar and then on the second color containing all of the sub menus. Any ideas? The attached screenshot shows the design. I know how to accomplish this with a top-bar and secondary buttons and then hide the nav for small screens and simply use a different top-bar for the small screens, but I am wondering if I can accomplish this with just one top-bar?

Thanks for the help.

-Scott

Screen shot 2016 02 27 at 10.31.31 am
Rafi Benkual almost 4 years ago

Depends what you're looking to do on mobile. Will the lower black menu be collapsed into the mobile menu?

You would use two separate .menu components for this each with their own custom class.