Responsive Behavior: Home Page
The Home Page is a “Full Width Page” type (set in the “Quick Edits” setting on the “Pages” master directory). The same behaviors apply to other Full Width Page types.
Thresholds for changes in viewport (widths include the scrollbar):
Above 1200 pixels:
Below 1200 pixels
- Home page drop-down menus start to stack
- Transaction bar cells start to stack text within a cell
Below 980 pixels:
- Transaction bar squishes, and becomes two columns
- Two-column layouts remain two columns
- Three-column layouts become two columns
Below 600 pixels:
- The main menu bar collapses to the “Hamburger” or “Sandwich” form (an expanded version – after clicking the 3-line icon – is shown below)
- The “transaction bar” now stacks to one item per line
- All content blocks stack to one column
Responsive Behavior: Lower Level Pages
Lower level pages are of the “Default” page type, and are structured with
– Left sidebar at 1/3 page-width
– Content at 2/3 page-width
Because of the 1/3 – 2/3 layout of lower level pages, other behaviors occur during responsive size changes. Thresholds for changes in viewport (widths include the scrollbar):
Above 1200 pixels:
- Breadcrumbs appear at top of content area
- A new Parent/Child Menu appears at top of Left Sidebar
- Transaction menu converts to Widget in Left Sidebar labeled “Duderstadt Center Quick Links”
- Other page-specific widgets (e.g., Quick Links, More Videos) appear in Left Sidebar
Below 1200 pixels
- The Parent/Child Menu now pops above the content
- “Duderstadt Center Quick Links” and all other page-specific widgets remain in Left Sidebar
Below 980 pixels:
- The Parent/Child menu remains above the Main Content
- All widgets drop to the bottom, below all content
Below 600 pixels:
- The main menu bar collapses to the “Hamburger” or “Sandwich” form
- The Parent/Child menu remains above the Main Content
- All content stacks to one-column
- All Widgets remain at the bottom of the page
