Mega-Menu

Here is an empty, unstyled container waiting for your site content! You can tweak the styling the way you want, but don't touch the top padding!

Mega-Menu

A very versatile menu which is made to incorporate a large number of sub-menus. Just add more categories and subnav items to the 'columns', or remove some if they are too many. The menu is positioned 'fixed' for viewports above 600px.

The container .content-container below the menu has a top padding which is important for keeping the page content visible. That container can be used for the content to go onto the page. It can be made wider, narrower, longer, shorter, the only thing that must not be touched is the top padding.

There are two versions of this menu, one in full page width, the other one is 1000px wide, like the demo on this page.

Placeholder Picture

Download the 'mobile-up' component (Full width)

Placeholder Picture

Download the 'mobile-up' component (1000px wide)

Placeholder Picture

Download the 'desktop-down' component (1000px wide)

If you just remove the max-width from the 'desktop-down' component, it will be full width.