-
Our School
This is an unstyled container to pop your site content into. It has a small top padding at widths below 600px, and a much larger top padding at wider viewports. This is because the menu will be sticky on devices wider than 600px, and without the top padding, the contents would slide up behind the menu. The sticky positioning has been disabled on this page, though, in order not to cover the page header.
You can style, tweak and resize this container as you want, but it's best to leave the top padding as is.
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 1200px wide, like the demo on this page. Unfortunately the menus don't work well in IE11, because the element with the blue background will not wrap on small screens.
Download this component (full width)
Download this component (1200px wide)