From 39e8d235bb9945dfa7433f2509c562ba53181cef Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Thu, 5 Nov 2020 16:14:51 -0500
Subject: [PATCH] initial changes for the new horizontal menu system

---
 css/styles.css                                | 1139 +++++++++++------
 js/component_scripts.min.js                   |   60 +
 source/_data/design-tokens.artifact.yml       |    2 +-
 source/_patterns/00-config/_breakpoints.scss  |    4 +-
 .../00-config/_design-tokens.artifact.scss    |    2 +-
 .../00-config/config.design-tokens.yml        |    2 +-
 .../_patterns/03-layouts/header/_header.scss  |   36 +-
 .../_patterns/03-layouts/header/header.twig   |   25 +-
 source/_patterns/03-layouts/header/header.yml |  704 +++++++++-
 .../site-container/site-container.twig        |   11 +-
 .../site-container/site-container.yml         |  768 ++++++++++-
 .../_patterns/04-components/menu/_menu.scss   |    2 +-
 .../menu/menu--header/menu--header.twig       |    8 +-
 .../menu/menu--header/menu--header.yml        |    2 +-
 .../menu--horizontal/_menu--horizontal.scss   |  404 ++++++
 .../menu/menu--horizontal/menu--horizontal.js |   59 +
 .../menu/menu--horizontal/menu--horizontal.md |    0
 .../menu--horizontal/menu--horizontal.twig    |   22 +
 .../menu--horizontal/menu--horizontal.yml     |   41 +
 .../menu/menu--main/_menu--main.scss          |  604 ++++-----
 .../menu/menu--main/menu--main.twig           |   79 +-
 .../menu/menu--main/menu--main.yml            |  221 +++-
 .../menu--secondary/_menu--secondary.scss     |  339 +++++
 .../menu/menu--secondary/menu--secondary.twig |    4 +
 .../menu/menu--secondary/menu--secondary.yml  |  541 ++++++++
 source/_patterns/04-components/menu/menu.twig |   27 +-
 .../04-components/site-logo/_site-logo.scss   |   21 +-
 27 files changed, 4264 insertions(+), 863 deletions(-)
 create mode 100644 source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
 create mode 100644 source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
 create mode 100644 source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.md
 create mode 100644 source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
 create mode 100644 source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
 create mode 100644 source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
 create mode 100644 source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
 create mode 100644 source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml

diff --git a/css/styles.css b/css/styles.css
index 363ab4c4..45da58b4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -362,7 +362,7 @@
       color: #fff; }
       .breakpoint::before {
         content: "large"; } }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .breakpoint {
       background-color: rgba(95, 158, 160, 0.7);
       color: #fff; }
@@ -1502,12 +1502,12 @@ svg:not(:root) {
   .uw-footer__wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63.1875rem;
+    max-width: 75rem;
     padding: 0 16px;
     display: grid;
     grid-template-columns: 100%;
     padding: 16px; }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-footer__wrapper {
         padding-left: 0;
         padding-right: 0; } }
@@ -1820,46 +1820,49 @@ svg:not(:root) {
           width: 100%; } } }
 
 .uw-header {
-  background-color: #000;
-  width: 100%; }
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+  background-color: #000; }
   .uw-header__wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75rem;
+    padding: 0 16px;
     display: grid;
     font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
     grid-template-columns: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 1rem 0 0;
+    padding: 16px;
     position: relative; }
-    @media (min-width: 63.1875rem) {
+    @media (min-width: 75rem) {
       .uw-header__wrapper {
-        grid-template-columns: auto 12.5rem 50.5rem auto; } }
+        padding-left: 0;
+        padding-right: 0; } }
+    @media (min-width: 48.06rem) {
+      .uw-header__wrapper {
+        grid-template-columns: 12.5rem  auto; } }
     .uw-header__wrapper .uw-site-logo {
-      grid-column: 1 / 5;
-      grid-row: 1 / 2; }
-      @media (min-width: 63.1875rem) {
+      grid-column: 1 / 3;
+      grid-row: 1 / 2;
+      text-align: center; }
+      @media (min-width: 48.06rem) {
         .uw-header__wrapper .uw-site-logo {
-          grid-column: 2 / 3;
+          grid-column: 1 / 2;
           grid-row: 1 / 2; } }
     .uw-header__wrapper .uw-header-menu {
-      grid-column: 1 / 5;
-      grid-row: 2 / 3;
-      padding: 1rem 0; }
-      @media (min-width: 63.1875rem) {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3; }
+      @media (min-width: 48.06rem) {
         .uw-header__wrapper .uw-header-menu {
-          grid-column: 3 / 4;
+          grid-column: 2 / 3;
           grid-row: 1 / 2; } }
     .uw-header__wrapper .uw-colour-bar {
-      grid-column: 1 / 5;
-      grid-row: 3 / 4;
-      padding-top: 1rem; }
-      @media (min-width: 63.1875rem) {
-        .uw-header__wrapper .uw-colour-bar {
-          grid-column: 1 / 5;
-          grid-row: 2 / 3; } }
+      padding-top: 1rem;
+      width: 100%; }
     .uw-header__wrapper .uw-main-nav {
       grid-column: 1 / 5;
       grid-row: 4 / 5; }
-      @media (min-width: 63.1875rem) {
+      @media (min-width: 48.06rem) {
         .uw-header__wrapper .uw-main-nav {
           grid-column: 1 / 5;
           grid-row: 3 / 4; } }
@@ -1874,23 +1877,23 @@ svg:not(:root) {
 .layout {
   margin-left: auto;
   margin-right: auto;
-  max-width: 63.1875rem;
+  max-width: 75rem;
   padding: 0 16px; }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .layout {
       padding-left: 0;
       padding-right: 0; } }
   .layout.uw-contained-width {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63.1875rem;
+    max-width: 75rem;
     padding: 0 16px;
     padding: 1rem; }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .layout.uw-contained-width {
         padding-left: 0;
         padding-right: 0; } }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .layout.uw-contained-width {
         padding: 1rem 0; } }
   .layout.uw-full-width {
@@ -2003,17 +2006,17 @@ svg:not(:root) {
   .uw-site-container .uw-highlighted {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63.1875rem;
+    max-width: 75rem;
     padding: 0 16px;
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     padding: 1rem;
     width: 100%; }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-site-container .uw-highlighted {
         padding-left: 0;
         padding-right: 0; } }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-site-container .uw-highlighted {
         padding: 0; } }
   .uw-site-container .uw-main {
@@ -2030,14 +2033,14 @@ svg:not(:root) {
   .uw-site-footer__wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63.1875rem;
+    max-width: 75rem;
     padding: 0 16px;
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: auto auto auto;
     padding-bottom: 16px;
     padding-top: 16px; }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-site-footer__wrapper {
         padding-left: 0;
         padding-right: 0; } }
@@ -2047,7 +2050,7 @@ svg:not(:root) {
     @media (min-width: 63.1875rem) {
       .uw-site-footer__wrapper {
         grid-template-columns: 70% 30%; } }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-site-footer__wrapper {
         padding: 16px 0; } }
   .uw-site-footer__logo {
@@ -2081,7 +2084,7 @@ svg:not(:root) {
         grid-column: 1 / 3;
         grid-row: 2 / 3;
         text-align: left; } }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-site-footer__content {
         padding-left: 0;
         padding-right: 0; } }
@@ -2100,10 +2103,10 @@ svg:not(:root) {
 form {
   margin-left: auto;
   margin-right: auto;
-  max-width: 63.1875rem;
+  max-width: 75rem;
   padding: 0 16px;
   padding: 1rem; }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .uw-highlighted,
     .block-page-title-block,
     .block-local-tasks-block,
@@ -2117,7 +2120,7 @@ form {
     form {
       padding-left: 0;
       padding-right: 0; } }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .uw-highlighted,
     .block-page-title-block,
     .block-local-tasks-block,
@@ -2588,10 +2591,10 @@ button {
   .uw-cta.uw-contained-width {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63.1875rem;
+    max-width: 75rem;
     padding: 0 16px;
     padding: 0; }
-    @media (min-width: 80rem) {
+    @media (min-width: 75rem) {
       .uw-cta.uw-contained-width {
         padding-left: 0;
         padding-right: 0; } }
@@ -2920,7 +2923,7 @@ button {
   @media (min-width: 63.1875rem) {
     .uw-colour-bar__cbar {
       height: 1rem; } }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .uw-colour-bar__cbar {
       height: 1.125rem; } }
 
@@ -2936,10 +2939,10 @@ button {
 .uw-copy-text__wrapper.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
-  max-width: 63.1875rem;
+  max-width: 75rem;
   padding: 0 16px;
   padding: 1rem 0; }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .uw-copy-text__wrapper.uw-contained-width {
       padding-left: 0;
       padding-right: 0; } }
@@ -3836,9 +3839,9 @@ fieldset,
 .uw-image__wrapper.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
-  max-width: 63.1875rem;
+  max-width: 75rem;
   padding: 0 16px; }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .uw-image__wrapper.uw-contained-width {
       padding-left: 0;
       padding-right: 0; } }
@@ -3969,7 +3972,7 @@ fieldset,
     .menu {
       display: none; } }
 
-.menu__item {
+.menu--item {
   margin-bottom: 0; }
 
 .menu--account {
@@ -4030,7 +4033,7 @@ fieldset,
       font-size: 0.79rem;
       grid-template-columns: auto auto auto;
       grid-template-rows: auto auto auto; } }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .menu--uw-footer {
       font-size: 16px; } }
   .menu--uw-footer li {
@@ -4086,383 +4089,729 @@ fieldset,
     .uw-header-menu a:hover {
       text-decoration: underline; }
 
-.org-ahs .uw-main-nav__home:hover svg {
-  fill: #97dfef; }
-
-.org-ahs .uw-main-nav__more:hover svg {
-  fill: #97dfef; }
-
-.org-ahs .menu--main > .is-active-trail {
-  border-top: 4px solid #97dfef; }
-  .org-ahs .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main .has-children:hover::after {
-  border-left: 4px solid #97dfef; }
-
-.org-ahs .menu--main li:hover > a {
-  color: #97dfef; }
-
-.org-ahs .menu--main li ul {
-  border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main li ul .is-active-trail {
-  color: #97dfef; }
-
-.org-ahs .menu--main li ul li ul {
-  border-left: 4px solid #97dfef; }
-  .org-ahs .menu--main li ul li ul::before {
-    border-right: 5px solid #97dfef; }
-
-.org-ahs .menu--main li .is-active-trail {
-  color: #97dfef; }
-
-.org-art .uw-main-nav__home:hover svg {
-  fill: #ffd5a5; }
-
-.org-art .uw-main-nav__more:hover svg {
-  fill: #ffd5a5; }
-
-.org-art .menu--main > .is-active-trail {
-  border-top: 4px solid #ffd5a5; }
-  .org-art .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main .has-children:hover::after {
-  border-left: 4px solid #ffd5a5; }
-
-.org-art .menu--main li:hover > a {
-  color: #ffd5a5; }
-
-.org-art .menu--main li ul {
-  border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main li ul .is-active-trail {
-  color: #ffd5a5; }
-
-.org-art .menu--main li ul li ul {
-  border-left: 4px solid #ffd5a5; }
-  .org-art .menu--main li ul li ul::before {
-    border-right: 5px solid #ffd5a5; }
-
-.org-art .menu--main li .is-active-trail {
-  color: #ffd5a5; }
-
-.org-eng .uw-main-nav__home:hover svg {
-  fill: #d0b4ef; }
-
-.org-eng .uw-main-nav__more:hover svg {
-  fill: #d0b4ef; }
-
-.org-eng .menu--main > .is-active-trail {
-  border-top: 4px solid #d0b4ef; }
-  .org-eng .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main .has-children:hover::after {
-  border-left: 4px solid #d0b4ef; }
-
-.org-eng .menu--main li:hover > a {
-  color: #d0b4ef; }
-
-.org-eng .menu--main li ul {
-  border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main li ul .is-active-trail {
-  color: #d0b4ef; }
-
-.org-eng .menu--main li ul li ul {
-  border-left: 4px solid #d0b4ef; }
-  .org-eng .menu--main li ul li ul::before {
-    border-right: 5px solid #d0b4ef; }
-
-.org-eng .menu--main li .is-active-trail {
-  color: #d0b4ef; }
+.org-default .uw-horizontal-nav .uw-site-home__link {
+  background-color: #000; }
+  .org-default .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fdd54f; }
+  .org-default .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-default .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #fdd54f; }
+  .org-default .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fdd54f; }
+    .org-default .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #000; }
 
-.org-env .uw-main-nav__home:hover svg {
-  fill: #daf582; }
+.org-default .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #000;
+  color: #fff; }
 
-.org-env .uw-main-nav__more:hover svg {
-  fill: #daf582; }
+.org-default .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-default .uw-horizontal-nav .menu--horizontal li > a:focus, .org-default .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #fffaaa;
+    color: #000; }
 
-.org-env .menu--main > .is-active-trail {
-  border-top: 4px solid #daf582; }
-  .org-env .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #daf582; }
+.org-ahs .uw-horizontal-nav .uw-site-home__link {
+  background-color: #005963; }
+  .org-ahs .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-ahs .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-ahs .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #005963; }
+  .org-ahs .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-ahs .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #005963; }
+
+.org-ahs .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #005963;
+  color: #fff; }
 
-.org-env .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #daf582; }
+.org-ahs .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-ahs .uw-horizontal-nav .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #97dfef;
+    color: #000; }
 
-.org-env .menu--main .has-children:hover::after {
-  border-left: 4px solid #daf582; }
+.org-art .uw-horizontal-nav .uw-site-home__link {
+  background-color: #d93f00; }
+  .org-art .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-art .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-art .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #d93f00; }
+  .org-art .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-art .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #d93f00; }
+
+.org-art .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #d93f00;
+  color: #fff; }
 
-.org-env .menu--main li:hover > a {
-  color: #daf582; }
+.org-art .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-art .uw-horizontal-nav .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #ffd5a5;
+    color: #000; }
 
-.org-env .menu--main li ul {
-  border-top: 4px solid #daf582; }
+.org-eng .uw-horizontal-nav .uw-site-home__link {
+  background-color: #57058b; }
+  .org-eng .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-eng .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-eng .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #57058b; }
+  .org-eng .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-eng .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #57058b; }
+
+.org-eng .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #57058b;
+  color: #fff; }
 
-.org-env .menu--main li ul .is-active-trail {
-  color: #daf582; }
+.org-eng .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-eng .uw-horizontal-nav .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #d0b4ef;
+    color: #000; }
 
-.org-env .menu--main li ul li ul {
-  border-left: 4px solid #daf582; }
-  .org-env .menu--main li ul li ul::before {
-    border-right: 5px solid #daf582; }
+.org-env .uw-horizontal-nav .uw-site-home__link {
+  background-color: #607000; }
+  .org-env .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-env .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-env .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #607000; }
+  .org-env .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-env .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #607000; }
+
+.org-env .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #607000;
+  color: #fff; }
 
-.org-env .menu--main li .is-active-trail {
-  color: #daf582; }
+.org-env .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-env .uw-horizontal-nav .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #daf582;
+    color: #000; }
 
-.org-mat .uw-main-nav__home:hover svg {
-  fill: #ffbeef; }
+.org-mat .uw-horizontal-nav .uw-site-home__link {
+  background-color: #c60078; }
+  .org-mat .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-mat .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-mat .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #c60078; }
+  .org-mat .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-mat .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #c60078; }
+
+.org-mat .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #c60078;
+  color: #fff; }
 
-.org-mat .uw-main-nav__more:hover svg {
-  fill: #ffbeef; }
+.org-mat .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-mat .uw-horizontal-nav .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #ffbeef;
+    color: #000; }
 
-.org-mat .menu--main > .is-active-trail {
-  border-top: 4px solid #ffbeef; }
-  .org-mat .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #ffbeef; }
+.org-sci .uw-horizontal-nav .uw-site-home__link {
+  background-color: #0033be; }
+  .org-sci .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-sci .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-sci .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #0033be; }
+  .org-sci .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-sci .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #0033be; }
+
+.org-sci .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #0033be;
+  color: #fff; }
 
-.org-mat .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #ffbeef; }
+.org-sci .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-sci .uw-horizontal-nav .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #b4d5ff;
+    color: #000; }
 
-.org-mat .menu--main .has-children:hover::after {
-  border-left: 4px solid #ffbeef; }
+.org-school .uw-horizontal-nav .uw-site-home__link {
+  background-color: #80001f; }
+  .org-school .uw-horizontal-nav .uw-site-home__link svg {
+    fill: #fff; }
+  .org-school .uw-horizontal-nav .uw-site-home__link:focus {
+    background-color: #fff; }
+    .org-school .uw-horizontal-nav .uw-site-home__link:focus svg {
+      fill: #80001f; }
+  .org-school .uw-horizontal-nav .uw-site-home__link:hover {
+    background-color: #fff; }
+    .org-school .uw-horizontal-nav .uw-site-home__link:hover svg {
+      fill: #80001f; }
+
+.org-school .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
+  background-color: #80001f;
+  color: #fff; }
 
-.org-mat .menu--main li:hover > a {
-  color: #ffbeef; }
+.org-school .uw-horizontal-nav .menu--horizontal li > a {
+  background-color: #eee;
+  color: #000; }
+  .org-school .uw-horizontal-nav .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav .menu--horizontal li > a:active {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav .menu--horizontal li > a:hover {
+    background-color: #ffa5aa;
+    color: #000; }
 
-.org-mat .menu--main li ul {
-  border-top: 4px solid #ffbeef; }
+.uw-horizontal-nav {
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+  background: #eee; }
+  .uw-horizontal-nav--wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75rem;
+    padding: 0 16px;
+    display: grid;
+    padding: 8px;
+    position: relative; }
+    @media (min-width: 75rem) {
+      .uw-horizontal-nav--wrapper {
+        padding-left: 0;
+        padding-right: 0; } }
+    @media (min-width: 48.06rem) {
+      .uw-horizontal-nav--wrapper {
+        grid-template-columns: 3rem auto; } }
+  .uw-horizontal-nav--home {
+    display: none; }
+    @media (min-width: 48.06rem) {
+      .uw-horizontal-nav--home {
+        display: block;
+        grid-column: 1/2;
+        padding: 4px; }
+        .uw-horizontal-nav--home .uw-site-home__link {
+          border: 1px solid #eee;
+          border-radius: 50%;
+          display: block;
+          height: 2rem;
+          outline: none;
+          width: 2rem; }
+          .uw-horizontal-nav--home .uw-site-home__link svg {
+            height: 2rem;
+            padding-left: 4px;
+            padding-top: 4px;
+            width: 2rem; } }
+  .uw-horizontal-nav--menu {
+    max-width: 100%;
+    padding: 0;
+    width: 100%; }
+    @media (min-width: 48.06rem) {
+      .uw-horizontal-nav--menu {
+        grid-column: 2/3; } }
+    .uw-horizontal-nav--menu .menu .menu--item a {
+      cursor: pointer;
+      outline: none;
+      outline-offset: unset; }
+    .uw-horizontal-nav--menu .menu--horizontal {
+      max-width: 100%;
+      padding: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+      font-size: 0.79rem;
+      justify-content: flex-start;
+      text-transform: uppercase;
+      width: 100%; }
+      .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+        white-space: nowrap;
+        width: 100%; }
+        @media (min-width: 48.06rem) {
+          .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+            width: auto; } }
+        .uw-horizontal-nav--menu .menu--horizontal > .menu--item a {
+          display: inline-block;
+          line-height: 1.25rem;
+          padding: 8px;
+          text-decoration: none;
+          width: 100%; }
+        .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
+          padding-right: 24px;
+          position: relative; }
+          .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+            content: '\e906';
+            display: block;
+            font-family: fdsu-rwd;
+            position: absolute;
+            right: 8px;
+            text-align: center;
+            top: 8px;
+            transform: scale(0.75, 0.75); }
+            @media (min-width: 48.06rem) {
+              .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+                transform: scale(0.75, 0.75) rotate(90deg); } }
+          .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:focus::after {
+            color: #fff; }
+          .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:hover::after {
+            color: #000; }
+    .uw-horizontal-nav--menu .menu--subnav {
+      background: #eee;
+      display: none;
+      font-size: 0.79rem;
+      text-transform: none; }
+    .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 75rem;
+      padding: 0 16px;
+      display: flex;
+      flex-flow: wrap;
+      flex-direction: column;
+      height: 100%;
+      left: 3rem;
+      min-height: 30rem;
+      position: absolute;
+      top: 100%;
+      width: 85%;
+      z-index: 10; }
+      @media (min-width: 75rem) {
+        .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+          padding-left: 0;
+          padding-right: 0; } }
+      .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav {
+        box-shadow: none;
+        -moz-column-count: inherit;
+             column-count: inherit;
+        display: inherit;
+        flex-flow: inherit;
+        flex-direction: inherit;
+        height: inherit;
+        left: inherit;
+        max-height: inherit;
+        min-height: inherit;
+        position: inherit;
+        top: inherit;
+        width: inherit;
+        z-index: inherit; }
+      .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
+        border-right: 1px solid #a2a2a2;
+        flex: 0 1;
+        padding-left: 8px; }
+        .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+          font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+          font-weight: 600; }
+        .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item:last-child {
+          border-right: 0; }
+        .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
+          border-right: 0;
+          flex: inherit;
+          margin-top: inherit;
+          padding-left: 24px; }
+          .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
+            font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+            font-weight: 200; }
+          .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item {
+            border-right: 0;
+            flex: inherit;
+            margin-top: inherit;
+            padding-left: 16px; }
+            .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
+              font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+              font-weight: 200; }
+
+.org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #000;
+  color: #fff; }
 
-.org-mat .menu--main li ul .is-active-trail {
-  color: #ffbeef; }
+.org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #fffaaa;
+    color: #000; }
 
-.org-mat .menu--main li ul li ul {
-  border-left: 4px solid #ffbeef; }
-  .org-mat .menu--main li ul li ul::before {
-    border-right: 5px solid #ffbeef; }
+.org-default .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #000;
+    color: #fff; }
+  .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #fffaaa;
+    color: #000; }
 
-.org-mat .menu--main li .is-active-trail {
-  color: #ffbeef; }
+.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #005963;
+  color: #fff; }
 
-.org-sci .uw-main-nav__home:hover svg {
-  fill: #b4d5ff; }
+.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #97dfef;
+    color: #000; }
 
-.org-sci .uw-main-nav__more:hover svg {
-  fill: #b4d5ff; }
+.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #005963;
+    color: #fff; }
+  .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #97dfef;
+    color: #000; }
 
-.org-sci .menu--main > .is-active-trail {
-  border-top: 4px solid #b4d5ff; }
-  .org-sci .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #d93f00;
+  color: #fff; }
 
-.org-sci .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #ffd5a5;
+    color: #000; }
 
-.org-sci .menu--main .has-children:hover::after {
-  border-left: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #d93f00;
+    color: #fff; }
+  .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #ffd5a5;
+    color: #000; }
 
-.org-sci .menu--main li:hover > a {
-  color: #b4d5ff; }
+.org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #57058b;
+  color: #fff; }
 
-.org-sci .menu--main li ul {
-  border-top: 4px solid #b4d5ff; }
+.org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #d0b4ef;
+    color: #000; }
 
-.org-sci .menu--main li ul .is-active-trail {
-  color: #b4d5ff; }
+.org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #57058b;
+    color: #fff; }
+  .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #d0b4ef;
+    color: #000; }
 
-.org-sci .menu--main li ul li ul {
-  border-left: 4px solid #b4d5ff; }
-  .org-sci .menu--main li ul li ul::before {
-    border-right: 5px solid #b4d5ff; }
+.org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #607000;
+  color: #fff; }
 
-.org-sci .menu--main li .is-active-trail {
-  color: #b4d5ff; }
+.org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #daf582;
+    color: #000; }
 
-.org-school .uw-main-nav__home:hover svg {
-  fill: #ffa5aa; }
+.org-env .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #607000;
+    color: #fff; }
+  .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #daf582;
+    color: #000; }
 
-.org-school .uw-main-nav__more:hover svg {
-  fill: #ffa5aa; }
+.org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #c60078;
+  color: #fff; }
 
-.org-school .menu--main > .is-active-trail {
-  border-top: 4px solid #ffa5aa; }
-  .org-school .menu--main > .is-active-trail.has-submenu::after {
-    border-top: 4px solid #ffa5aa; }
+.org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #ffbeef;
+    color: #000; }
 
-.org-school .menu--main .has-submenu:hover::after {
-  border-top: 4px solid #ffa5aa; }
+.org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #c60078;
+    color: #fff; }
+  .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #ffbeef;
+    color: #000; }
 
-.org-school .menu--main .has-children:hover::after {
-  border-left: 4px solid #ffa5aa; }
+.org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #0033be;
+  color: #fff; }
 
-.org-school .menu--main li:hover > a {
-  color: #ffa5aa; }
+.org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #b4d5ff;
+    color: #000; }
 
-.org-school .menu--main li ul {
-  border-top: 4px solid #ffa5aa; }
+.org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #0033be;
+    color: #fff; }
+  .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #b4d5ff;
+    color: #000; }
 
-.org-school .menu--main li ul .is-active-trail {
-  color: #ffa5aa; }
+.org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
+  background-color: #80001f;
+  color: #fff; }
 
-.org-school .menu--main li ul li ul {
-  border-left: 4px solid #ffa5aa; }
-  .org-school .menu--main li ul li ul::before {
-    border-right: 5px solid #ffa5aa; }
+.org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
+  background-color: #eee;
+  color: #000; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
+    background-color: #ffa5aa;
+    color: #000; }
 
-.org-school .menu--main li .is-active-trail {
-  color: #ffa5aa; }
+.org-school .uw-horizontal-nav--secondary .menu--horizontal li > a {
+  background-color: #fff;
+  color: #000; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
+    background-color: #80001f;
+    color: #fff; }
+  .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
+    background-color: #ffa5aa;
+    color: #000; }
 
-.uw-main-nav {
-  background-color: #000;
-  display: block;
-  width: 100%; }
-  .uw-main-nav__wrapper {
-    display: grid;
-    grid-template-columns: 25px auto 40px;
+.uw-horizontal-nav--secondary {
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+  background: #fff; }
+  .uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: 63rem; }
-  .uw-main-nav__home {
-    background-color: #000;
-    grid-column: 1 / 2; }
-    .uw-main-nav__home:hover {
-      background-color: #000; }
-      .uw-main-nav__home:hover svg {
-        fill: #fdd54f; }
-    .uw-main-nav__home a {
-      display: flex;
-      height: 100%; }
-      .uw-main-nav__home a svg {
-        fill: #fff;
-        margin: auto; }
-  .uw-main-nav__navigation {
-    grid-column: 2 / 3; }
-  .uw-main-nav__more {
-    grid-column: 3 / 4; }
-    .uw-main-nav__more:hover ul {
-      display: block; }
-    .uw-main-nav__more:hover svg {
-      fill: #fdd54f; }
-    .uw-main-nav__more--icon {
-      height: 100%;
-      position: relative; }
-      .uw-main-nav__more--icon svg {
-        fill: #fff;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        position: absolute;
-        top: 25%; }
-    .uw-main-nav__more ul {
-      display: none; }
-
-.menu--main {
-  background: #000;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-  .menu--main > .is-active-trail {
-    border: 0;
-    border-top: 4px solid #fdd54f;
-    position: relative; }
-    .menu--main > .is-active-trail.has-submenu::after {
-      border-top: 4px solid #fdd54f; }
-  .menu--main .has-submenu::after {
-    border: 0;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid #fff;
-    content: '';
-    display: initial;
-    height: 0;
-    position: absolute;
-    right: 2px;
-    top: 45%;
-    width: 0; }
-  .menu--main .has-submenu:hover::after {
-    border-top: 4px solid #fdd54f; }
-  .menu--main .has-children::after {
-    border-bottom: 4px solid transparent;
-    border-left: 4px solid #fff;
-    border-top: 4px solid transparent;
-    content: '';
-    display: initial;
-    height: 0;
-    position: absolute;
-    right: 2px;
-    top: 40%;
-    width: 0; }
-  .menu--main .has-children:hover::after {
-    border-left: 4px solid #fdd54f; }
-  .menu--main li {
-    flex: 1 auto;
-    float: left;
-    max-width: 200px;
+    max-width: 75rem;
+    padding: 0 16px;
+    padding: 0;
     position: relative; }
-    .menu--main li:hover > a {
-      color: #fdd54f; }
-    .menu--main li:hover > ul,
-    .menu--main li li ul li:hover > ul {
-      display: block;
-      opacity: 1;
-      visibility: visible; }
-    .menu--main li ul,
-    .menu--main li ul li ul {
-      background: #000;
-      border-top: 4px solid #fdd54f;
-      height: auto;
-      margin: 0;
-      min-width: 200px;
-      opacity: 0;
+    @media (min-width: 75rem) {
+      .uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
+        padding-left: 0;
+        padding-right: 0; } }
+  .uw-horizontal-nav--secondary .uw-horizontal-nav--home {
+    display: none;
+    grid-column: none;
+    padding: 0; }
+  .uw-horizontal-nav--secondary .uw-horizontal-nav--menu {
+    max-width: 100%;
+    padding: 0;
+    width: 100%; }
+    .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu .menu--item a {
+      outline: none;
+      outline-offset: unset; }
+    .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal {
+      max-width: 100%;
       padding: 0;
-      position: absolute;
-      visibility: hidden;
-      z-index: 1000; }
-    .menu--main li ul li ul {
-      border: 0;
-      border-top: 0; }
-    .menu--main li ul li {
-      float: none; }
-      .menu--main li ul li:hover > ul {
-        left: 200px;
-        top: 0; }
-      .menu--main li ul li a {
-        border: 0;
-        padding: 10px; }
-      .menu--main li ul li ul {
-        border: 0;
-        border-left: 4px solid #fdd54f;
-        left: 230px;
-        top: 0; }
-    .menu--main li ul .is-active-trail {
-      color: #fdd54f; }
-    .menu--main li a {
-      color: #fff;
+      width: 100%;
       display: flex;
-      height: 100%;
-      padding: 0.5rem 1rem;
-      text-align: center;
-      text-decoration: none;
-      text-transform: uppercase; }
-      .menu--main li a .link-text {
-        margin: auto; }
-    .menu--main li .is-active-trail {
-      color: #fdd54f; }
+      flex-direction: row;
+      flex-wrap: wrap;
+      font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+      font-size: 0.79rem;
+      justify-content: flex-start;
+      text-transform: inherit;
+      width: 100%; }
+      .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+        white-space: nowrap;
+        width: 100%; }
+        @media (min-width: 48.06rem) {
+          .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+            width: auto; } }
+        .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item a {
+          display: inline-block;
+          font-weight: inherit;
+          line-height: 1.25rem;
+          padding: 8px;
+          text-decoration: none;
+          width: 100%; }
+        .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
+          padding-right: 24px;
+          position: relative; }
+          .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+            content: '\e906';
+            display: block;
+            font-family: fdsu-rwd;
+            position: absolute;
+            right: 0.5rem;
+            text-align: center;
+            top: 0.5rem;
+            transform: scale(0.75, 0.75); }
+            @media (min-width: 48.06rem) {
+              .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+                transform: scale(0.75, 0.75) rotate(90deg); } }
+          .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:focus::after {
+            color: #fff; }
+          .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:hover::after {
+            color: #000; }
+    .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--subnav {
+      background: #eee;
+      display: none;
+      font-size: 0.79rem;
+      text-transform: none; }
+    .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 75rem;
+      padding: 0 16px; }
+      @media (min-width: 75rem) {
+        .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+          padding-left: 0;
+          padding-right: 0; } }
 
 .social-media-list {
   align-items: start;
@@ -4925,14 +5274,18 @@ picture {
     width: 100%; }
 
 .uw-site-logo {
-  background: url("../source/images/logos/uwaterloo-logo.svg") 0 50% no-repeat;
-  background-color: #000;
-  background-size: contain;
-  color: #000;
-  display: block;
-  height: 2.688rem;
-  text-indent: -999rem;
-  width: 100%; }
+  margin: 0 auto;
+  width: 12.5rem; }
+  .uw-site-logo .uw-site-logo__link {
+    background: url("../source/images/logos/uwaterloo-logo.svg") 0 50% no-repeat;
+    background-color: #000;
+    background-size: contain;
+    color: #000;
+    display: block;
+    height: 2.688rem;
+    text-align: center;
+    text-indent: -999rem;
+    width: 100%; }
 
 .site-name {
   padding: 1rem; }
@@ -5276,14 +5629,14 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
 .views-element-container {
   margin-left: auto;
   margin-right: auto;
-  max-width: 63.1875rem;
+  max-width: 75rem;
   padding: 0 16px;
   padding: 1rem; }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .views-element-container {
       padding-left: 0;
       padding-right: 0; } }
-  @media (min-width: 80rem) {
+  @media (min-width: 75rem) {
     .views-element-container {
       padding: 1rem 0; } }
 
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index a9e05b56..5bfc2a72 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -233,3 +233,63 @@
 
 
 
+
+(function ($, Drupal) {
+    Drupal.behaviors.menuhorizontal = {
+        attach: function (context, settings) {
+            $(document).ready(function(){
+
+
+                // const toggle = document.querySelector(".toggle");
+                const menu = document.querySelector(".menu--horizontal");
+                const items = document.querySelectorAll(".menu--item");
+//
+//                 /* Toggle mobile menu */
+//                 // function toggleMenu() {
+//                 //     if (menu.classList.contains("active")) {
+//                 //         menu.classList.remove("active");
+//                 //         toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
+//                 //     } else {
+//                 //         menu.classList.add("active");
+//                 //         toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
+//                 //     }
+//                 // }
+//
+                /* Activate Submenu */
+                function toggleItem() {
+
+                    if (this.classList.contains("submenu-active")) {
+                        this.classList.remove("submenu-active");
+                    } else if (menu.querySelector(".submenu-active")) {
+                        menu.querySelector(".submenu-active").classList.remove("submenu-active");
+                        this.classList.add("submenu-active");
+                    } else {
+                        this.classList.add("submenu-active");
+                    }
+                }
+//
+                /* Close Submenu From Anywhere */
+                function closeSubmenu(e) {
+
+                    let isClickInside = menu.contains(e.target);
+
+                    if (!isClickInside && menu.querySelector(".submenu-active")) {
+
+                        menu.querySelector(".submenu-active").classList.remove("submenu-active");
+                    }
+
+                }
+                /* Event Listeners */
+                // toggle.addEventListener("click", toggleMenu, false);
+
+                for (let item of items) {
+                    if (item.querySelector(".menu--subnav")) {
+                        item.addEventListener("click", toggleItem, false);
+                    }
+                    item.addEventListener("keypress", toggleItem, false);
+                }
+                document.addEventListener("click", closeSubmenu, false);
+            });
+        }
+    };
+})(jQuery, Drupal);
diff --git a/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index e466a437..01163760 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -131,7 +131,7 @@ gesso:
     sm: 641px
     md: 769px
     lg: 1011px
-    xl: 1280px
+    xl: 1200px
     xxl: 1640px
     onek: 1920px
     twok: 2559px
diff --git a/source/_patterns/00-config/_breakpoints.scss b/source/_patterns/00-config/_breakpoints.scss
index 72e5ff42..b03bdf4b 100644
--- a/source/_patterns/00-config/_breakpoints.scss
+++ b/source/_patterns/00-config/_breakpoints.scss
@@ -15,11 +15,11 @@ $xs: 30rem;
 $small: 40.06rem;
 $medium: 48.06rem;
 $large: 63.1875rem;
-$xl: 80rem;
+$xl: 75rem;
 $xxl: 102.5rem;
 $onek: 120rem;
 $twok: 159.93rem;
-$max-width: $large;
+$max-width: $xl;
 
 /// Mixin - xs Breakpoint
 /// Allows easier @include xs {} syntax
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index 49fc5e96..544f6584 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -158,7 +158,7 @@ $gesso: (
     sm: 641px,
     md: 769px,
     lg: 1011px,
-    xl: 1280px,
+    xl: 1200px,
     xxl: 1640px,
     onek: 1920px,
     twok: 2559px,
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index 586527a0..146c9bc4 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -131,7 +131,7 @@ gesso:
     sm: 641px
     md: 769px
     lg: 1011px
-    xl: 1280px
+    xl: 1200px
     xxl: 1640px
     onek: 1920px
     twok: 2559px
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 2cf4b77f..62224b44 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -2,58 +2,50 @@
 // Styles for Header Layout.
 
 .uw-header {
+  @include uw-full-width;
   background-color: #000;
-  width: 100%;
 
   &__wrapper {
+    @include uw-contained-width;
     display: grid;
     font-family:gesso-font-family(condensedbook);
     grid-template-columns: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 1rem 0 0;
+    padding:gesso-spacing(sm);
     position: relative;
-
-    @include large {
-      grid-template-columns: auto 12.5rem 50.5rem auto;
+    @include medium {
+      grid-template-columns: 12.5rem  auto;
     }
 
     .uw-site-logo {
-      grid-column: 1 / 5;
+      grid-column: 1 / 3;
       grid-row: 1 / 2;
-      @include large {
-        grid-column: 2 / 3;
+      text-align:center;
+      @include medium {
+        grid-column: 1 / 2;
         grid-row: 1 / 2;
       }
     }
 
     .uw-header-menu {
-      grid-column: 1 / 5;
+      grid-column: 1 / 3;
       grid-row: 2 / 3;
-      padding: 1rem 0;
 
-      @include large {
-        grid-column: 3 / 4;
+      @include medium {
+        grid-column: 2 / 3;
         grid-row: 1 / 2;
       }
     }
 
     .uw-colour-bar {
-      grid-column: 1 / 5;
-      grid-row: 3 / 4;
       padding-top: 1rem;
-
-      @include large {
-        grid-column: 1 / 5;
-        grid-row: 2 / 3;
-      }
+      width:100%;
     }
 
     .uw-main-nav {
       grid-column: 1 / 5;
       grid-row: 4 / 5;
 
-      @include large {
+      @include medium{
         grid-column: 1 / 5;
         grid-row: 3 / 4;
       }
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index 4e84c78e..7b58b318 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -1,20 +1,27 @@
-{%  set faculty = faculty ? faculty : 'org-default' %}
+{%  if is_demo %}
+  {%  set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+<header class="uw-header {{ faculty }}" role="banner">
 
-<header class="uw-header" role="banner">
   <div class="uw-header__wrapper">
     {% include '@components/site-logo/site-logo.twig' %}
+
     {% block content %}
       {% include "@components/menu/menu--header/menu--header.twig" with {
         'menu_name': 'uw-header',
         'items': items
       } %}
-      {% include "@components/menu/menu--main/menu--main.twig" with {
-        'menu_name': 'main',
-        'items': nav_items
-      } %}
     {% endblock %}
-    {% include '@components/color-bar/color-bar.twig' with {
-      'faculty': faculty
-    }%}
   </div>
+  {% include '@components/color-bar/color-bar.twig' with {
+    'faculty': faculty
+  }%}
+  {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+    'modifier_classes': 'header',
+    'items': nav_items
+  }%}
+  {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+    'items': secondary_items,
+    'modifier_classes': secondary_modifier_classes
+  }%}
 </header>
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index 106ab25d..a5031720 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -1,5 +1,6 @@
 ---
-menu_name: 'header'
+is_demo: true
+menu_name: 'horizontal'
 items:
   - title: 'Admissions'
     url: 'https://uwaterloo.ca/admissions/'
@@ -37,162 +38,763 @@ items:
           class: ''
     in_active_trail: false
 nav_items:
-  - text: 'Home'
-    url: '/front'
+  - text: 'About Psychology'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
-  - text: 'This is a long menu link'
-    url: 'https://uwaterloo.ca/'
+    submenu:
+      - text: 'Our mission & vision'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Our People'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Research'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
     submenu:
-      - text: 'Link #1-1'
-        url: '/front'
+      - text: 'Research areas'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
-      - text: 'This is an even longer menu link'
-        url: '/front'
+      - text: 'Research Chair and Awards'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
         submenu:
-          - text: 'Link #1-2-1'
-            url: 'https://uwaterloo.ca/'
+          - text: 'Clinical'
+            url: '#'
             original_link:
               options:
                 attributes:
                   class: ''
             active_trail: false
-          - text: 'Link #1-2-2'
-            url: 'https://uwaterloo.ca/'
+          - text: 'Cognitive'
+            url: '#'
             original_link:
               options:
                 attributes:
-              class: ''
+                  class: ''
             active_trail: false
-          - text: 'Link #1-2-3'
-            url: 'https://uwaterloo.ca/'
+          - text: 'Cognitive Neuroscience'
+            url: '#'
             original_link:
               options:
                 attributes:
                   class: ''
             active_trail: false
-      - text: 'Link #1-3'
-        url: '/front'
+          - text: 'Developmental'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Industrial-Organizational'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+            submenu:
+              - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Social Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+  - text: 'Teaching excellence'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Experiential learning'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
-  - text: 'Link #2'
-    url: 'https://uwaterloo.ca/'
+  - text: 'News'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Events'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Centre for Mental Health Research and Treatment'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
-  - text: 'Link #3'
-    url: 'https://uwaterloo.ca/'
+  - text: 'Early Childhood Education Centre'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
-  - text: 'Link #4'
-    url: 'https://uwaterloo.ca/'
+    submenu:
+      - text: 'Programs offered | Fees'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Enrollment Process | Registration'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research and academic programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Volunteer program'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Contact us'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Resources and links'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Celebrating the Class of 2020'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
-    active_trail: true
+    active_trail: false
     submenu:
-      - text: 'Link #4-1'
-        url: '/front'
+      - text: 'Convocation Award Winners 2020'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
-        active_trail: true
-      - text: 'Link #4-2'
-        url: '/front'
+        active_trail: false
+      - text: 'Student Memories 2020'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
-  - text: 'Link #5'
-    url: 'https://uwaterloo.ca/'
+  - text: 'Community Partners'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
-  - text: 'Link #6'
-    url: 'https://uwaterloo.ca/'
+  - text: 'Department Profiles Sherman Kwok'
+    url: '#'
     original_link:
-    options:
-      attributes:
-        class: ''
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+secondary_modifier_classes: 'secondary'
+secondary_items:
+  - text: 'Undergraduate students '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
     active_trail: false
     submenu:
-      - text: 'Link #6-1'
-        url: 'https://uwaterloo.ca/'
+      - text: 'Degree Options and Specializations'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
-      - text: 'Link #6-2'
-        url: 'https://uwaterloo.ca/'
+      - text: 'How to become a Psychology Student'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
         submenu:
-          - text: 'Link #6-2-1'
-            url: 'https://uwaterloo.ca/'
+          - text: 'Prospective student'
+            url: '#'
             original_link:
               options:
                 attributes:
                   class: ''
             active_trail: false
-          - text: 'Link #6-2-2'
-            url: 'https://uwaterloo.ca/'
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Future course offerings'
+            url: '#'
             original_link:
               options:
                 attributes:
                   class: ''
             active_trail: false
-          - text: 'Link #6-2-3'
-            url: 'https://uwaterloo.ca/'
+          - text: 'Courses requiring an application'
+            url: '#'
             original_link:
               options:
                 attributes:
                   class: ''
             active_trail: false
-      - text: 'Link #6-3'
-        url: 'https://uwaterloo.ca/'
+          - text: 'Honours Thesis (Psych 499)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Conference opportunities '
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+                submenu:
+                  - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+                    url: '#'
+                    original_link:
+                      options:
+                        attributes:
+                          class: ''
+                    active_trail: false
+              - text: 'Publishing opportunities'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Course overrides'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Special Topics and Honours Seminars'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Syllabus Archive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Experiential Learning'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
         active_trail: false
-  - text: 'Link #7'
-    url: 'https://uwaterloo.ca/'
+        submenu:
+          - text: 'Psychology co-op'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Research Assistant (RA) positions'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+              class: ''
+            active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Academic standing'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Policies'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'University policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Department policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Awards '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Convocation and thesis awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Memorial Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Other research awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Distinguished Teacher Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Psychology Undergraduate Society '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'About to graduate'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Career Options'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Career advising'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'College programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Bachelors'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Masters or PhD'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Graduate studies in Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Letters of recommendation'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Other programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Who can I ask?'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Human Resources Management program '
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
     active_trail: false
+    submenu:
+      - text: 'Meet your lecturers'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minor & Diploma'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Meet Our Students'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Get involved'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'News'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Alumni | Friends'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'HRM Opportunities'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Graduate students'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minimum admission requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Application procedures'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Degree requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Submission of the Masters Thesis'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the Masters Research Paper (MASc students)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Forming a PhD Committee'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Guideline for PhD Thesis Defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the PhD thesis following the defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Forms'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Funding & Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Careers of Alumni'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'GASP (Graduate Association of Students in Psychology)'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Graduate courses'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Orientation guide'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Policies and procedures'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Showcasing graduate student research'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Teaching assistantships'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+  - text: 'Faculty & Staff'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+  - text: 'Alumni & Friends'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    submenu:
+      - text: 'Share your story'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Profiles & Achievements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Make a gift'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Positions available'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 34f0d3c0..21320f1c 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -1,9 +1,10 @@
-<div class="uw-site-container">
+{%  if is_demo %}
+  {%  set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+
+<div class="uw-site-container" {%  if is_demo %}{{ faculty }}{% endif %}>
   {% block header %}
-    {% include "@layouts/header/header.twig" with {
-      'menu_name': header_menu_name,
-      'items': header_items
-    } %}
+    {% include "@layouts/header/header.twig"%}
   {% endblock %}
 
   {% block highlighted %}
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index 00745166..b0a04706 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -1,7 +1,10 @@
-header_menu_name: 'header'
+---
+is_demo: true
+modifier_classes: 'header'
+menu_name: 'horizontal'
 header_items:
   - title: 'Admissions'
-    url: https://uwaterloo.ca/admissions/'
+    url: 'https://uwaterloo.ca/admissions/'
     original_link:
       options:
         attributes:
@@ -116,3 +119,764 @@ social_media:
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
 social_media_placement: "global-site-footer"
+nav_items:
+  - text: 'About Psychology'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Our mission & vision'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Our People'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Research'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Research areas'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research Chair and Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Clinical'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive Neuroscience'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Developmental'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Industrial-Organizational'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+            submenu:
+              - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Social Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+  - text: 'Teaching excellence'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Experiential learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'News'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Events'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Centre for Mental Health Research and Treatment'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Early Childhood Education Centre'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Programs offered | Fees'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Enrollment Process | Registration'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research and academic programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Volunteer program'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Contact us'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Resources and links'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Celebrating the Class of 2020'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Convocation Award Winners 2020'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Student Memories 2020'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Community Partners'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Department Profiles Sherman Kwok'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+secondary_modifier_classes: 'secondary'
+secondary_items:
+  - text: 'Undergraduate students '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Degree Options and Specializations'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'How to become a Psychology Student'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Prospective student'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Future course offerings'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Courses requiring an application'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Honours Thesis (Psych 499)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Conference opportunities '
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+                submenu:
+                  - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+                    url: '#'
+                    original_link:
+                      options:
+                        attributes:
+                          class: ''
+                    active_trail: false
+              - text: 'Publishing opportunities'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Course overrides'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Special Topics and Honours Seminars'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Syllabus Archive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Experiential Learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Psychology co-op'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Research Assistant (RA) positions'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+              class: ''
+            active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Academic standing'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Policies'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'University policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Department policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Awards '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Convocation and thesis awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Memorial Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Other research awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Distinguished Teacher Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Psychology Undergraduate Society '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'About to graduate'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Career Options'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Career advising'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'College programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Bachelors'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Masters or PhD'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Graduate studies in Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Letters of recommendation'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Other programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Who can I ask?'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Human Resources Management program '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Meet your lecturers'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minor & Diploma'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Meet Our Students'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Get involved'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'News'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Alumni | Friends'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'HRM Opportunities'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Graduate students'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minimum admission requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Application procedures'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Degree requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Submission of the Masters Thesis'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the Masters Research Paper (MASc students)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Forming a PhD Committee'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Guideline for PhD Thesis Defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the PhD thesis following the defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Forms'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Funding & Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Careers of Alumni'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'GASP (Graduate Association of Students in Psychology)'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Graduate courses'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Orientation guide'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Policies and procedures'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Showcasing graduate student research'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Teaching assistantships'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+  - text: 'Faculty & Staff'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+  - text: 'Alumni & Friends'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    submenu:
+      - text: 'Share your story'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Profiles & Achievements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Make a gift'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Positions available'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
diff --git a/source/_patterns/04-components/menu/_menu.scss b/source/_patterns/04-components/menu/_menu.scss
index e4650724..4b2be0fc 100644
--- a/source/_patterns/04-components/menu/_menu.scss
+++ b/source/_patterns/04-components/menu/_menu.scss
@@ -9,6 +9,6 @@
   }
 }
 
-.menu__item {
+.menu--item {
   margin-bottom: 0;
 }
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.twig b/source/_patterns/04-components/menu/menu--header/menu--header.twig
index 56940e89..b463ad31 100644
--- a/source/_patterns/04-components/menu/menu--header/menu--header.twig
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.twig
@@ -1,6 +1,6 @@
 <nav class="uw-header-menu" aria-label="University">
-  {% include '@components/menu/menu.twig' with {
-    'menu_name': menu_name,
-    'items': items
-  } %}
+    {% include '@components/menu/menu.twig' with {
+        'menu_name': menu_name,
+        'items': items
+    } %}
 </nav>
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.yml b/source/_patterns/04-components/menu/menu--header/menu--header.yml
index ba27ee3a..bfc00c9f 100644
--- a/source/_patterns/04-components/menu/menu--header/menu--header.yml
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.yml
@@ -1,5 +1,5 @@
 ---
-menu_name: 'header'
+menu_name: 'horizontal'
 items:
   - title: 'Admissions'
     url: 'https://uwaterloo.ca/admissions/'
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
new file mode 100644
index 00000000..f3dbeefb
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -0,0 +1,404 @@
+$menu-horizontal-bg: gesso-grayscale(gray-2);
+$menu-horizontal-bar-font: gesso-font-family(book);
+$menu-horizontal-sub-font: gesso-font-family(systemmedium);
+$menu-horizontal-sub-font-bold: gesso-font-family(systembold);
+$menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
+$menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
+
+// Colors
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+@each $faculty in $faculties {
+  @if $faculty == org-default{
+    .#{$faculty} {
+      .uw-horizontal-nav {
+        .uw-site-home__link{
+          background-color:gesso-brand(org-default,uw-black, lvl4);
+          svg{
+            fill:gesso-brand(org-default,uw-gold,primary);
+          }
+          &:focus{
+            background-color: gesso-brand(org-default,uw-white,lvl1);
+            svg{
+              fill:gesso-brand(org-default,uw-gold,primary);
+            }
+          }
+          &:hover{
+            background-color:gesso-brand(org-default,uw-gold,primary);
+            svg{
+              fill:gesso-brand(org-default,uw-black, lvl4);
+            }
+          }
+        }
+
+        .menu--horizontal {
+          //> .is-active-trail {
+          //  border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //
+          //  &.has-submenu {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-submenu {
+          //  &:hover {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-children {
+          //  &:hover {
+          //    &::after {
+          //      border-left: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+
+          li {
+            &.submenu-active {
+              > a {
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+            }
+            > a{
+              background-color:$menu-horizontal-bg;
+              color: gesso-brand(org-default,uw-black,lvl4);
+
+              &:focus,
+              &.is-active-trail{
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              &:active{
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              &:hover{
+                background-color: gesso-brand(org-default,uw-gold,lvl1);
+                color: gesso-brand(org-default,uw-black,lvl4);
+              }
+            }
+
+            ul {
+              //border-top: 4px solid gesso-brand($faculty, $link-lvl);
+            }
+
+            ul {
+              //.is-active-trail {
+              //  color: gesso-brand($faculty, $link-lvl);
+              //}
+              li {
+                ul {
+                  //border-left: 4px solid gesso-brand($faculty, $link-lvl);
+
+                  &::before {
+                    //border-right: 5px solid gesso-brand($faculty, $link-lvl);
+                  }
+                }
+              }
+            }
+
+            //.is-active-trail {
+            //  color: gesso-brand($faculty, $link-lvl);
+            //}
+          }
+        }
+      }
+    }
+  }
+  @else {
+    .#{$faculty} {
+      .uw-horizontal-nav {
+        .uw-site-home__link{
+          background-color:gesso-brand($faculty, lvl4);
+          svg{
+            fill:gesso-brand(org-default,uw-white,lvl1);
+          }
+          &:focus{
+            background-color: gesso-brand(org-default,uw-white,lvl1);
+            svg{
+              fill:gesso-brand($faculty, lvl4);
+            }
+          }
+          &:hover{
+            background-color:gesso-brand(org-default,uw-white,lvl1);
+            svg{
+              fill:gesso-brand($faculty, lvl4);
+            }
+          }
+        }
+
+        .menu--horizontal {
+          //> .is-active-trail {
+          //  border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //
+          //  &.has-submenu {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-submenu {
+          //  &:hover {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-children {
+          //  &:hover {
+          //    &::after {
+          //      border-left: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+
+          li {
+            &.submenu-active {
+              > a {
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+            }
+            > a{
+              background-color:$menu-horizontal-bg;
+              color: gesso-brand(org-default,uw-black,lvl4);
+
+              &:focus,
+              &.is-active-trail{
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default,uw-white,lvl1);
+              }
+              &:active{
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default,uw-white,lvl1);
+              }
+              &:hover{
+                background-color: gesso-brand($faculty, lvl1);
+                color: gesso-brand(org-default,uw-black,lvl4);
+              }
+            }
+
+            ul {
+              //border-top: 4px solid gesso-brand($faculty, $link-lvl);
+            }
+
+            ul {
+              //.is-active-trail {
+              //  color: gesso-brand($faculty, $link-lvl);
+              //}
+              li {
+                ul {
+                  //border-left: 4px solid gesso-brand($faculty, $link-lvl);
+
+                  &::before {
+                    //border-right: 5px solid gesso-brand($faculty, $link-lvl);
+                  }
+                }
+              }
+            }
+
+            //.is-active-trail {
+            //  color: gesso-brand($faculty, $link-lvl);
+            //}
+          }
+        }
+      }
+    }
+  }
+}
+
+.uw-horizontal-nav{
+  @include uw-full-width;
+  background:$menu-horizontal-bg;
+  &--wrapper{
+    @include uw-contained-width;
+    display:grid;
+    padding:gesso-spacing(xs);
+    position:relative;
+    @include medium{
+      grid-template-columns: 3rem auto;
+    }
+
+  }
+  &--home{
+    display:none;
+    @include medium{
+      display:block;
+      grid-column: 1/2;
+      padding:gesso-spacing(xxs);
+      .uw-site-home__link{
+        border:1px solid $menu-horizontal-bg;
+        border-radius:50%;
+        display:block;
+        height:2rem;
+        outline:none;
+        width:2rem;
+        svg{
+          height:2rem;
+          padding-left:gesso-spacing(xxs);
+          padding-top:gesso-spacing(xxs);
+          width:2rem;
+        }
+      }
+    }
+  }
+  &--menu {
+    @include uw-full-width;
+
+    @include medium{
+      grid-column: 2/3;
+    }
+
+    .menu {
+      // ALL Menus ul>
+
+      .menu--item{
+
+        a{
+          cursor:pointer;
+          outline:none;
+          outline-offset: unset;
+
+        }
+      }
+      // Top Level <ul> flex top items
+      &--horizontal {
+        @include uw-full-width;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        font-family: $menu-horizontal-bar-font;
+        font-size: $menu-horizontal-bar-font-size;
+        justify-content: flex-start;
+        text-transform:uppercase;
+        width: 100%;
+        > .menu--item{
+
+          //flex: auto;
+          white-space:nowrap;
+          width:100%;
+          @include medium{
+            width:auto;
+          }
+          a{
+            display:inline-block;
+            line-height:1.25rem;
+            padding:gesso-spacing(xs);
+            text-decoration:none;
+            width:100%;
+          }
+          &.has-submenu {
+            > a{
+                padding-right:gesso-spacing(md);
+                position:relative;
+
+                &::after {
+                  content:'\e906';
+                  display:block;
+                  font-family: gesso-font-family(iconfont);
+                  position:absolute;
+                  right:gesso-spacing(xs);
+                  text-align: center;
+                  top:gesso-spacing(xs);
+                  transform: scale(0.75, 0.75);
+                 @include medium{
+                   transform: scale(0.75, 0.75) rotate(90deg);
+                 }
+              }
+              &:focus{
+                &::after {
+                 color: gesso-brand(org-default,uw-white,lvl1);
+                }
+              }
+              &:hover {
+                &::after {
+                  color: gesso-brand(org-default,uw-black,lvl4);
+                }
+              }
+            }
+          }
+        }
+      }
+
+
+      // hide all menus that are classed subnav
+      &--subnav {
+        background:$menu-horizontal-bg;
+        display: none;
+        font-size: $menu-horizontal-sub-font-size;
+        text-transform: none;
+
+      }
+      .submenu-active .menu--subnav{
+        @include uw-contained-width;
+        //box-shadow: inset 0 0 8px #ccc;
+        display:flex;
+        flex-flow: wrap;
+        flex-direction: column;
+        height:100%;
+        left:3rem;
+        min-height:30rem;
+        position:absolute;
+        top:100%;
+        width:85%;
+        z-index:10;
+
+        .menu--subnav{
+          box-shadow:none;
+          column-count:inherit;
+          display:inherit;
+          flex-flow: inherit;
+          flex-direction: inherit;
+          height:inherit;
+          left:inherit;
+          max-height:inherit;
+          min-height:inherit;
+          position:inherit;
+          top:inherit;
+          width:inherit;
+          z-index:inherit;
+        }
+        .menu--item{
+          border-right: 1px solid gesso-brand(org-default,uw-black,lvl2);
+          a{
+            font-family:$menu-horizontal-sub-font-bold;
+            font-weight:600;
+          }
+          flex: 0 1;
+          padding-left: gesso-spacing(xs);
+
+          &:last-child{
+            border-right:0;
+          }
+          .menu--item{
+            border-right:0;
+            flex: inherit;
+            margin-top:inherit;
+            padding-left: gesso-spacing(md);
+            a{
+              font-family:$menu-horizontal-sub-font;
+              font-weight:200;
+            }
+            .menu--item{
+              border-right:0;
+              flex: inherit;
+              margin-top:inherit;
+              padding-left: gesso-spacing(sm);
+              a{
+                font-family:$menu-horizontal-sub-font;
+                font-weight:200;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
new file mode 100644
index 00000000..6531ee09
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -0,0 +1,59 @@
+(function ($, Drupal) {
+    Drupal.behaviors.menuhorizontal = {
+        attach: function (context, settings) {
+            $(document).ready(function(){
+
+
+                // const toggle = document.querySelector(".toggle");
+                const menu = document.querySelector(".menu--horizontal");
+                const items = document.querySelectorAll(".menu--item");
+//
+//                 /* Toggle mobile menu */
+//                 // function toggleMenu() {
+//                 //     if (menu.classList.contains("active")) {
+//                 //         menu.classList.remove("active");
+//                 //         toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
+//                 //     } else {
+//                 //         menu.classList.add("active");
+//                 //         toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
+//                 //     }
+//                 // }
+//
+                /* Activate Submenu */
+                function toggleItem() {
+
+                    if (this.classList.contains("submenu-active")) {
+                        this.classList.remove("submenu-active");
+                    } else if (menu.querySelector(".submenu-active")) {
+                        menu.querySelector(".submenu-active").classList.remove("submenu-active");
+                        this.classList.add("submenu-active");
+                    } else {
+                        this.classList.add("submenu-active");
+                    }
+                }
+//
+                /* Close Submenu From Anywhere */
+                function closeSubmenu(e) {
+
+                    let isClickInside = menu.contains(e.target);
+
+                    if (!isClickInside && menu.querySelector(".submenu-active")) {
+
+                        menu.querySelector(".submenu-active").classList.remove("submenu-active");
+                    }
+
+                }
+                /* Event Listeners */
+                // toggle.addEventListener("click", toggleMenu, false);
+
+                for (let item of items) {
+                    if (item.querySelector(".menu--subnav")) {
+                        item.addEventListener("click", toggleItem, false);
+                    }
+                    item.addEventListener("keypress", toggleItem, false);
+                }
+                document.addEventListener("click", closeSubmenu, false);
+            });
+        }
+    };
+})(jQuery, Drupal);
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.md b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.md
new file mode 100644
index 00000000..e69de29b
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
new file mode 100644
index 00000000..d6dd8ae8
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -0,0 +1,22 @@
+{%  if is_demo %}
+{%  set faculty = faculty ? faculty : 'org-env' %}
+<div class="{{ faculty }}">
+{% endif %}
+    <nav class="uw-horizontal-nav {% if modifier_classes %} uw-horizontal-nav--{{ modifier_classes }}{% endif %}">
+        <div class="uw-horizontal-nav--wrapper">
+            <div class="uw-horizontal-nav--home">
+                <a href="/home" class="uw-site-home__link">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
+                    <span class="off-screen">Home</span>
+                </a>
+            </div>
+            <div class="uw-horizontal-nav--menu">
+                {% include '@components/menu/menu.twig' with {
+                    'items': items
+                } %}
+            </div>
+        </div>
+    </nav>
+{%  if is_demo %}
+    </div>
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
new file mode 100644
index 00000000..1e9d2ed8
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
@@ -0,0 +1,41 @@
+---
+modifier_classes: ''
+menu_name: 'horizontal'
+is_demo: true
+items:
+  - text: 'Home'
+    url: '/front'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - text: 'Link #1'
+    url: 'https://uwaterloo.ca/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+    submenu:
+      - text: 'Link #1-1'
+        url: '/front'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+      - text: 'Link #1-2'
+        url: '/front'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+  - text: 'Link #2'
+    url: 'https://uwaterloo.ca/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
diff --git a/source/_patterns/04-components/menu/menu--main/_menu--main.scss b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
index 925d0320..f577a87a 100644
--- a/source/_patterns/04-components/menu/menu--main/_menu--main.scss
+++ b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
@@ -1,302 +1,302 @@
-$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
-$lvl: 'lvl1';
-
-@each $faculty in $faculties {
-  .#{$faculty} {
-    .uw-main-nav {
-      &__home {
-        &:hover {
-          svg {
-            fill: gesso-brand($faculty, $lvl);
-          }
-        }
-      }
-      &__more {
-        &:hover {
-          svg {
-            fill: gesso-brand($faculty, $lvl);
-          }
-        }
-      }
-    }
-
-    .menu--main {
-      > .is-active-trail {
-        border-top: 4px solid gesso-brand($faculty, $lvl);
-
-        &.has-submenu {
-          &::after {
-            border-top: 4px solid gesso-brand($faculty, $lvl);
-          }
-        }
-      }
-
-      .has-submenu {
-        &:hover {
-          &::after {
-            border-top: 4px solid gesso-brand($faculty, $lvl);
-          }
-        }
-      }
-
-      .has-children {
-        &:hover {
-          &::after {
-            border-left: 4px solid gesso-brand($faculty, $lvl);
-          }
-        }
-      }
-
-      li {
-        &:hover > a {
-          color: gesso-brand($faculty, $lvl);
-        }
-
-        ul {
-          border-top: 4px solid gesso-brand($faculty, $lvl);
-        }
-
-        ul {
-          .is-active-trail {
-            color: gesso-brand($faculty, $lvl);
-          }
-
-          li {
-            ul {
-              border-left: 4px solid gesso-brand($faculty, $lvl);
-
-              &::before {
-                border-right: 5px solid gesso-brand($faculty, $lvl);
-              }
-            }
-          }
-        }
-
-        .is-active-trail {
-          color: gesso-brand($faculty, $lvl);
-        }
-      }
-    }
-  }
-}
-
-.uw-main-nav {
-  background-color: $uw-black;
-  display: block;
-  width: 100%;
-
-  &__wrapper {
-    display: grid;
-    grid-template-columns: 25px auto 40px;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 63rem;
-  }
-
-  &__home {
-    background-color: $uw-black;
-    grid-column: 1 / 2;
-
-    &:hover {
-      background-color: $uw-black;
-
-      svg {
-        fill: $uw-gold;
-      }
-    }
-
-    a {
-      display: flex;
-      height: 100%;
-
-      svg {
-        fill: $uw-white;
-        margin: auto;
-      }
-    }
-  }
-
-  &__navigation {
-    grid-column: 2 / 3;
-  }
-
-  &__more {
-    grid-column: 3 / 4;
-
-    &:hover {
-      ul {
-        display: block;
-      }
-
-      svg {
-        fill: $uw-gold;
-      }
-    }
-
-    &--icon {
-      height: 100%;
-      position: relative;
-
-      svg {
-        fill: $uw-white;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        position: absolute;
-        top: 25%;
-      }
-    }
-
-    ul {
-      display: none;
-    }
-  }
-}
-
-.menu--main {
-  background: $uw-black;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  > .is-active-trail {
-    border: 0;
-    border-top: 4px solid $uw-gold;
-    position: relative;
-
-    &.has-submenu {
-      &::after {
-        border-top: 4px solid $uw-gold;
-      }
-    }
-  }
-
-  .has-submenu {
-    &::after {
-      border: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid $uw-white;
-      content: '';
-      display: initial;
-      height: 0;
-      position: absolute;
-      right: 2px;
-      top: 45%;
-      width: 0;
-    }
-
-    &:hover {
-      &::after {
-        border-top: 4px solid $uw-gold;
-      }
-    }
-  }
-
-  .has-children {
-    &::after {
-      border-bottom: 4px solid transparent;
-      border-left: 4px solid $uw-white;
-      border-top: 4px solid transparent;
-      content: '';
-      display: initial;
-      height: 0;
-      position: absolute;
-      right: 2px;
-      top: 40%;
-      width: 0;
-    }
-
-    &:hover {
-      &::after {
-        border-left: 4px solid $uw-gold;
-      }
-    }
-  }
-
-  li {
-    flex: 1 auto;
-    float: left;
-    max-width: 200px;
-    position: relative;
-
-    &:hover > a {
-      color: $uw-gold;
-    }
-
-    &:hover > ul,
-    li ul li:hover > ul {
-      display: block;
-      opacity: 1;
-      visibility: visible;
-    }
-
-    ul,
-    ul li ul {
-      background: $uw-black;
-      border-top: 4px solid $uw-gold;
-      height: auto;
-      margin: 0;
-      min-width: 200px;
-      opacity: 0;
-      padding: 0;
-      position: absolute;
-      visibility: hidden;
-      z-index: 1000;
-    }
-
-    ul li ul {
-      border: 0;
-      border-top: 0;
-    }
-
-    ul {
-
-      li {
-        float: none;
-
-        &:hover > ul {
-          left: 200px;
-          top: 0;
-        }
-
-        a {
-          border: 0;
-          padding: 10px;
-        }
-
-        ul {
-          border: 0;
-          border-left: 4px solid $uw-gold;
-          left: 230px;
-          top: 0;
-        }
-      }
-
-      .is-active-trail {
-        color: $uw-gold;
-      }
-    }
-
-    a {
-      color: $uw-white;
-      display: flex;
-      height: 100%;
-      padding: 0.5rem 1rem;
-      text-align: center;
-      text-decoration: none;
-      text-transform: uppercase;
-
-      .link-text {
-        margin: auto;
-      }
-    }
-
-    .is-active-trail {
-      color: $uw-gold;
-    }
-  }
-}
+//$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+//$lvl: 'lvl1';
+//
+//@each $faculty in $faculties {
+//  .#{$faculty} {
+//    .uw-main-nav {
+//      &__home {
+//        &:hover {
+//          svg {
+//            fill: gesso-brand($faculty, $lvl);
+//          }
+//        }
+//      }
+//      &__more {
+//        &:hover {
+//          svg {
+//            fill: gesso-brand($faculty, $lvl);
+//          }
+//        }
+//      }
+//    }
+//
+//    .menu--main {
+//      > .is-active-trail {
+//        border-top: 4px solid gesso-brand($faculty, $lvl);
+//
+//        &.has-submenu {
+//          &::after {
+//            border-top: 4px solid gesso-brand($faculty, $lvl);
+//          }
+//        }
+//      }
+//
+//      .has-submenu {
+//        &:hover {
+//          &::after {
+//            border-top: 4px solid gesso-brand($faculty, $lvl);
+//          }
+//        }
+//      }
+//
+//      .has-children {
+//        &:hover {
+//          &::after {
+//            border-left: 4px solid gesso-brand($faculty, $lvl);
+//          }
+//        }
+//      }
+//
+//      li {
+//        &:hover > a {
+//          color: gesso-brand($faculty, $lvl);
+//        }
+//
+//        ul {
+//          border-top: 4px solid gesso-brand($faculty, $lvl);
+//        }
+//
+//        ul {
+//          .is-active-trail {
+//            color: gesso-brand($faculty, $lvl);
+//          }
+//
+//          li {
+//            ul {
+//              border-left: 4px solid gesso-brand($faculty, $lvl);
+//
+//              &::before {
+//                border-right: 5px solid gesso-brand($faculty, $lvl);
+//              }
+//            }
+//          }
+//        }
+//
+//        .is-active-trail {
+//          color: gesso-brand($faculty, $lvl);
+//        }
+//      }
+//    }
+//  }
+//}
+//
+//.uw-main-nav {
+//  background-color: $uw-black;
+//  display: block;
+//  width: 100%;
+//
+//  &__wrapper {
+//    display: grid;
+//    grid-template-columns: 25px auto 40px;
+//    margin-left: auto;
+//    margin-right: auto;
+//    max-width: 63rem;
+//  }
+//
+//  &__home {
+//    background-color: $uw-black;
+//    grid-column: 1 / 2;
+//
+//    &:hover {
+//      background-color: $uw-black;
+//
+//      svg {
+//        fill: $uw-gold;
+//      }
+//    }
+//
+//    a {
+//      display: flex;
+//      height: 100%;
+//
+//      svg {
+//        fill: $uw-white;
+//        margin: auto;
+//      }
+//    }
+//  }
+//
+//  &__navigation {
+//    grid-column: 2 / 3;
+//  }
+//
+//  &__more {
+//    grid-column: 3 / 4;
+//
+//    &:hover {
+//      ul {
+//        display: block;
+//      }
+//
+//      svg {
+//        fill: $uw-gold;
+//      }
+//    }
+//
+//    &--icon {
+//      height: 100%;
+//      position: relative;
+//
+//      svg {
+//        fill: $uw-white;
+//        padding-left: 0.5rem;
+//        padding-right: 0.5rem;
+//        position: absolute;
+//        top: 25%;
+//      }
+//    }
+//
+//    ul {
+//      display: none;
+//    }
+//  }
+//}
+//
+//.menu--main {
+//  background: $uw-black;
+//  -moz-border-radius: 2px;
+//  -webkit-border-radius: 2px;
+//  border-radius: 2px;
+//  display: flex;
+//  list-style: none;
+//  margin: 0;
+//  padding: 0;
+//
+//  > .is-active-trail {
+//    border: 0;
+//    border-top: 4px solid $uw-gold;
+//    position: relative;
+//
+//    &.has-submenu {
+//      &::after {
+//        border-top: 4px solid $uw-gold;
+//      }
+//    }
+//  }
+//
+//  .has-submenu {
+//    &::after {
+//      border: 0;
+//      border-left: 4px solid transparent;
+//      border-right: 4px solid transparent;
+//      border-top: 4px solid $uw-white;
+//      content: '';
+//      display: initial;
+//      height: 0;
+//      position: absolute;
+//      right: 2px;
+//      top: 45%;
+//      width: 0;
+//    }
+//
+//    &:hover {
+//      &::after {
+//        border-top: 4px solid $uw-gold;
+//      }
+//    }
+//  }
+//
+//  .has-children {
+//    &::after {
+//      border-bottom: 4px solid transparent;
+//      border-left: 4px solid $uw-white;
+//      border-top: 4px solid transparent;
+//      content: '';
+//      display: initial;
+//      height: 0;
+//      position: absolute;
+//      right: 2px;
+//      top: 40%;
+//      width: 0;
+//    }
+//
+//    &:hover {
+//      &::after {
+//        border-left: 4px solid $uw-gold;
+//      }
+//    }
+//  }
+//
+//  li {
+//    flex: 1 auto;
+//    float: left;
+//    max-width: 200px;
+//    position: relative;
+//
+//    &:hover > a {
+//      color: $uw-gold;
+//    }
+//
+//    &:hover > ul,
+//    li ul li:hover > ul {
+//      display: block;
+//      opacity: 1;
+//      visibility: visible;
+//    }
+//
+//    ul,
+//    ul li ul {
+//      background: $uw-black;
+//      border-top: 4px solid $uw-gold;
+//      height: auto;
+//      margin: 0;
+//      min-width: 200px;
+//      opacity: 0;
+//      padding: 0;
+//      position: absolute;
+//      visibility: hidden;
+//      z-index: 1000;
+//    }
+//
+//    ul li ul {
+//      border: 0;
+//      border-top: 0;
+//    }
+//
+//    ul {
+//
+//      li {
+//        float: none;
+//
+//        &:hover > ul {
+//          left: 200px;
+//          top: 0;
+//        }
+//
+//        a {
+//          border: 0;
+//          padding: 10px;
+//        }
+//
+//        ul {
+//          border: 0;
+//          border-left: 4px solid $uw-gold;
+//          left: 230px;
+//          top: 0;
+//        }
+//      }
+//
+//      .is-active-trail {
+//        color: $uw-gold;
+//      }
+//    }
+//
+//    a {
+//      color: $uw-white;
+//      display: flex;
+//      height: 100%;
+//      padding: 0.5rem 1rem;
+//      text-align: center;
+//      text-decoration: none;
+//      text-transform: uppercase;
+//
+//      .link-text {
+//        margin: auto;
+//      }
+//    }
+//
+//    .is-active-trail {
+//      color: $uw-gold;
+//    }
+//  }
+//}
diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.twig b/source/_patterns/04-components/menu/menu--main/menu--main.twig
index d9dffcfc..b9e3865b 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.twig
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.twig
@@ -1,37 +1,42 @@
-<nav class="uw-main-nav">
-  <div class="uw-main-nav__wrapper">
-    <div class="uw-main-nav__home">
-      <a href="/home" class="uw-site-home__link">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
-        <span class="off-screen">Home</span>
-      </a>
-    </div>
-    <div class="uw-main-nav__links">
-      {% if items|length > 5 %}
-        {% set main_links = items|slice(1, 5) %}
-      {% else %}
-        {% set main_links = items %}
-      {% endif %}
-      {% include '@components/menu/menu.twig' with {
-        'menu_name': 'main',
-        'items': main_links
-      } %}
-    </div>
-    {% if items|length > 5 %}
-      <div class="uw-main-nav__more">
-        <div class="uw-main-nav__more--icon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 992 992">
-            <circle cx="144.3" cy="496" r="144.3"/>
-            <circle cx="496" cy="496" r="144.3"/>
-            <circle cx="847.7" cy="496" r="144.3"/>
-          </svg>
-        </div>
-        {% set more_links = items|slice(6, item.length) %}
-        {% include '@components/menu/menu.twig' with {
-          'menu_name': 'main-more',
-          'items': more_links
-        } %}
-      </div>
-    {% endif %}
-  </div>
-</nav>
+{#<nav class="uw-main-nav">#}
+  {#<div class="uw-main-nav__wrapper">#}
+    {#<div class="uw-main-nav__home">#}
+      {#<a href="/home" class="uw-site-home__link">#}
+        {#<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>#}
+        {#<span class="off-screen">Home</span>#}
+      {#</a>#}
+    {#</div>#}
+    {#<div class="uw-main-nav__links">#}
+      {#{% if items|length > 5 %}#}
+        {#{% set main_links = items|slice(1, 5) %}#}
+      {#{% else %}#}
+        {#{% set main_links = items %}#}
+      {#{% endif %}#}
+      {#{% include '@components/menu/menu.twig' with {#}
+        {#'menu_name': 'main',#}
+        {#'items': main_links#}
+      {#} %}#}
+    {#</div>#}
+    {#{% if items|length > 5 %}#}
+      {#<div class="uw-main-nav__more">#}
+        {#<div class="uw-main-nav__more--icon">#}
+          {#<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 992 992">#}
+            {#<circle cx="144.3" cy="496" r="144.3"/>#}
+            {#<circle cx="496" cy="496" r="144.3"/>#}
+            {#<circle cx="847.7" cy="496" r="144.3"/>#}
+          {#</svg>#}
+        {#</div>#}
+        {#{% set more_links = items|slice(6, item.length) %}#}
+        {#{% include '@components/menu/menu.twig' with {#}
+          {#'menu_name': 'main-more',#}
+          {#'items': more_links#}
+        {#} %}#}
+      {#</div>#}
+    {#{% endif %}#}
+  {#</div>#}
+{#</nav>#}
+
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+   'items': items,
+   'is_demo': true
+ }%}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.yml b/source/_patterns/04-components/menu/menu--main/menu--main.yml
index b3f58062..aec000a0 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.yml
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.yml
@@ -1,37 +1,228 @@
+is_demo: true
+modifier_classes: 'main'
+menu_name: 'horizontal'
 items:
-  - text: 'Home'
-    url: '/front'
+  - text: 'About Psychology'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
-    in_active_trail: false
-  - text: 'Link #1'
-    url: 'https://uwaterloo.ca/'
+    active_trail: false
+    submenu:
+      - text: 'Our mission & vision'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Our People'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Research'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Research areas'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research Chair and Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Clinical'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive Neuroscience'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Developmental'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Industrial-Organizational'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+            submenu:
+              - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Social Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+  - text: 'Teaching excellence'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Experiential learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'News'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Events'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Centre for Mental Health Research and Treatment'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Early Childhood Education Centre'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Programs offered | Fees'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Enrollment Process | Registration'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research and academic programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Volunteer program'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Contact us'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Resources and links'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Celebrating the Class of 2020'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
-    in_active_trail: false
+    active_trail: false
     submenu:
-      - text: 'Link #1-1'
-        url: '/front'
+      - text: 'Convocation Award Winners 2020'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
-        in_active_trail: false
-      - text: 'Link #1-2'
-        url: '/front'
+        active_trail: false
+      - text: 'Student Memories 2020'
+        url: '#'
         original_link:
           options:
             attributes:
               class: ''
-        in_active_trail: false
-  - text: 'Link #2'
-    url: 'https://uwaterloo.ca/'
+        active_trail: false
+  - text: 'Community Partners'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+  - text: 'Department Profiles Sherman Kwok'
+    url: '#'
     original_link:
       options:
         attributes:
           class: ''
-    in_active_trail: false
+    active_trail: false
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
new file mode 100644
index 00000000..4d58882e
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -0,0 +1,339 @@
+$menu-horizontal-bg: gesso-brand(org-default,uw-white,lvl1);
+$menu-horizontal-drop-bg: gesso-grayscale(gray-2);
+$menu-horizontal-bar-font: gesso-font-family(systembold);
+$menu-horizontal-sub-font: gesso-font-family(system);
+$menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
+$menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+@each $faculty in $faculties {
+  @if $faculty == org-default{
+    .#{$faculty} {
+      .uw-horizontal-nav--secondary {
+         .menu--horizontal {
+          //> .is-active-trail {
+          //  border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //
+          //  &.has-submenu {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-submenu {
+          //  &:hover {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-children {
+          //  &:hover {
+          //    &::after {
+          //      border-left: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+
+          li {
+            &.submenu-active {
+              > a {
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              .menu--subnav{
+                a{
+                  background-color:$menu-horizontal-drop-bg;
+                  color: gesso-brand(org-default,uw-black,lvl4);
+                  &:focus,
+                  &.is-active-trail{
+                    background-color:gesso-brand(org-default, uw-black, lvl4);
+                    color: gesso-brand(org-default, uw-white, lvl1);
+                  }
+                  &:active{
+                    background-color:gesso-brand(org-default, uw-black, lvl4);
+                    color: gesso-brand(org-default, uw-white, lvl1);
+                  }
+                  &:hover{
+                    background-color: gesso-brand(org-default,uw-gold,lvl1);
+                    color: gesso-brand(org-default,uw-black,lvl4);
+                  }
+                }
+              }
+            }
+            > a{
+              background-color:$menu-horizontal-bg;
+              color: gesso-brand(org-default,uw-black,lvl4);
+
+              &:focus,
+              &.is-active-trail{
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              &:active{
+                background-color:gesso-brand(org-default, uw-black, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              &:hover{
+                background-color: gesso-brand(org-default,uw-gold,lvl1);
+                color: gesso-brand(org-default,uw-black,lvl4);
+              }
+            }
+
+            ul {
+              //border-top: 4px solid gesso-brand($faculty, $link-lvl);
+            }
+
+            ul {
+              //.is-active-trail {
+              //  color: gesso-brand($faculty, $link-lvl);
+              //}
+              li {
+                ul {
+                  //border-left: 4px solid gesso-brand($faculty, $link-lvl);
+
+                  &::before {
+                    //border-right: 5px solid gesso-brand($faculty, $link-lvl);
+                  }
+                }
+              }
+            }
+
+            //.is-active-trail {
+            //  color: gesso-brand($faculty, $link-lvl);
+            //}
+          }
+        }
+      }
+    }
+  }
+  @else {
+    .#{$faculty} {
+      .uw-horizontal-nav--secondary {
+        .menu--horizontal {
+          //> .is-active-trail {
+          //  border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //
+          //  &.has-submenu {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-submenu {
+          //  &:hover {
+          //    &::after {
+          //      border-top: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+          //
+          //.has-children {
+          //  &:hover {
+          //    &::after {
+          //      border-left: 4px solid gesso-brand($faculty, $link-lvl);
+          //    }
+          //  }
+          //}
+
+          li {
+            &.submenu-active {
+              > a {
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default, uw-white, lvl1);
+              }
+              .menu--subnav{
+                a{
+                  background-color:$menu-horizontal-drop-bg;
+                  color: gesso-brand(org-default,uw-black,lvl4);
+                  &:focus,
+                  &.is-active-trail{
+                    background-color: gesso-brand($faculty, lvl4);
+                    color: gesso-brand(org-default,uw-white,lvl1);
+                  }
+                  &:active{
+                    background-color: gesso-brand($faculty, lvl4);
+                    color: gesso-brand(org-default,uw-white,lvl1);
+                  }
+                  &:hover{
+                    background-color: gesso-brand($faculty, lvl1);
+                    color: gesso-brand(org-default,uw-black,lvl4);
+                  }
+                }
+              }
+            }
+            > a{
+              background-color:$menu-horizontal-bg;
+              color: gesso-brand(org-default,uw-black,lvl4);
+
+              &:focus,
+              &.is-active-trail{
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default,uw-white,lvl1);
+              }
+              &:active{
+                background-color: gesso-brand($faculty, lvl4);
+                color: gesso-brand(org-default,uw-white,lvl1);
+              }
+              &:hover{
+                background-color: gesso-brand($faculty, lvl1);
+                color: gesso-brand(org-default,uw-black,lvl4);
+              }
+            }
+
+            ul {
+              //border-top: 4px solid gesso-brand($faculty, $link-lvl);
+            }
+
+            ul {
+              //.is-active-trail {
+              //  color: gesso-brand($faculty, $link-lvl);
+              //}
+              li {
+                ul {
+                  //border-left: 4px solid gesso-brand($faculty, $link-lvl);
+
+                  &::before {
+                    //border-right: 5px solid gesso-brand($faculty, $link-lvl);
+                  }
+                }
+              }
+            }
+
+            //.is-active-trail {
+            //  color: gesso-brand($faculty, $link-lvl);
+            //}
+          }
+        }
+      }
+    }
+  }
+}
+.uw-horizontal-nav--secondary{
+  @include uw-full-width;
+  background:$menu-horizontal-bg;
+  .uw-horizontal-nav--wrapper{
+    @include uw-contained-width;
+    padding:0;
+    position:relative;
+
+  }
+  .uw-horizontal-nav--home{
+    display:none;
+    grid-column: none;
+    padding:0;
+
+  }
+  .uw-horizontal-nav--menu {
+    @include uw-full-width;
+
+    .menu {
+      // ALL Menus ul>
+
+      .menu--item{
+
+        a{
+          outline:none;
+          outline-offset: unset;
+
+        }
+      }
+      // Top Level <ul> flex top items
+      &--horizontal {
+        @include uw-full-width;
+        //background: #ffa500;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        font-family: $menu-horizontal-bar-font;
+        font-size: $menu-horizontal-bar-font-size;
+        justify-content: flex-start;
+        text-transform:inherit;
+        width: 100%;
+        > .menu--item{
+
+          //flex: auto;
+          white-space:nowrap;
+          width:100%;
+          @include medium{
+            width:auto;
+          }
+          a{
+            display:inline-block;
+            font-weight:inherit;
+            line-height:1.25rem;
+            padding:gesso-spacing(xs);
+            text-decoration:none;
+            width:100%;
+          }
+          &.has-submenu {
+            > a{
+              padding-right:gesso-spacing(md);
+              position:relative;
+
+              &::after {
+                content:'\e906';
+                display:block;
+                font-family: gesso-font-family(iconfont);
+                position:absolute;
+                right:0.5rem;
+                text-align: center;
+                top:0.5rem;
+                transform: scale(0.75, 0.75);
+                @include medium{
+                  transform: scale(0.75, 0.75) rotate(90deg);
+                }
+              }
+              &:focus{
+                &::after {
+                  color: gesso-brand(org-default,uw-white,lvl1);
+                }
+              }
+              &:hover {
+                &::after {
+                  color: gesso-brand(org-default,uw-black,lvl4);
+                }
+              }
+            }
+          }
+        }
+      }
+
+
+      // hide all menus that are classed subnav
+      &--subnav {
+        background:$menu-horizontal-drop-bg;
+        display: none;
+        font-size: $menu-horizontal-sub-font-size;
+        text-transform: none;
+
+      }
+      .submenu-active .menu--subnav{
+        @include uw-contained-width;
+        //left:0;
+        //min-height:10rem;
+        //position:absolute;
+        //top:100%;
+        //width:100%;
+        //z-index:10;
+        li{
+        }
+        .menu--subnav{
+          //box-shadow:none;
+          //display:inherit;
+          //left:inherit;
+          //min-height:inherit;
+          //position:inherit;
+          //top:inherit;
+          //width:inherit;
+          //z-index:inherit;
+        }
+        > li{
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
new file mode 100644
index 00000000..ef47d0ce
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
@@ -0,0 +1,4 @@
+{% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+    'items': items,
+    'is_demo': true
+}%}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
new file mode 100644
index 00000000..00631369
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
@@ -0,0 +1,541 @@
+---
+modifier_classes: 'secondary'
+menu_name: 'horizontal'
+is_demo: true
+items:
+  - text: 'Undergraduate students '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Degree Options and Specializations'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'How to become a Psychology Student'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Prospective student'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Future course offerings'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Courses requiring an application'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Honours Thesis (Psych 499)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Conference opportunities '
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+                submenu:
+                  - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+                    url: '#'
+                    original_link:
+                      options:
+                        attributes:
+                          class: ''
+                    active_trail: false
+              - text: 'Publishing opportunities'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Course overrides'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Special Topics and Honours Seminars'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Syllabus Archive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Experiential Learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Psychology co-op'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Research Assistant (RA) positions'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+              class: ''
+            active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Academic standing'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Policies'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'University policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Department policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Awards '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Convocation and thesis awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Memorial Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Other research awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Distinguished Teacher Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Psychology Undergraduate Society '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'About to graduate'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Career Options'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Career advising'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'College programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Bachelors'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Masters or PhD'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Graduate studies in Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Letters of recommendation'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Other programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Who can I ask?'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Human Resources Management program '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Meet your lecturers'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minor & Diploma'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Meet Our Students'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Get involved'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'News'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Alumni | Friends'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'HRM Opportunities'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Graduate students'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    submenu:
+      - text: 'Programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minimum admission requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Application procedures'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Degree requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Submission of the Masters Thesis'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the Masters Research Paper (MASc students)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Forming a PhD Committee'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Guideline for PhD Thesis Defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the PhD thesis following the defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Forms'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Funding & Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Careers of Alumni'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'GASP (Graduate Association of Students in Psychology)'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Graduate courses'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Orientation guide'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Policies and procedures'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Showcasing graduate student research'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Teaching assistantships'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+  - text: 'Faculty & Staff'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+  - text: 'Alumni & Friends'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    submenu:
+      - text: 'Share your story'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Profiles & Achievements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Make a gift'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Positions available'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+
+
diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig
index d7e729f6..3a82b170 100644
--- a/source/_patterns/04-components/menu/menu.twig
+++ b/source/_patterns/04-components/menu/menu.twig
@@ -20,18 +20,18 @@
       <ul {{ add_attributes(additional_attributes) }}>
 
     {% else %}
-      <ul class="menu menu__subnav">
+      <ul class="menu menu--subnav">
     {% endif %}
 
     {% for item in items %}
 
-      {% set item_classes = ['menu__item'] %}
-      {% set link_classes = ['menu__link'] %}
+      {% set item_classes = ['menu--item'] %}
+      {% set link_classes = ['menu--link'] %}
 
-      {% if item.below %}
-        {% set item_classes = item_classes|merge(['has-subnav']) %}
-        {% set link_classes = link_classes|merge(['has-subnav']) %}
-      {% endif %}
+      {#{% if item.below %}#}
+        {#{% set item_classes = item_classes|merge(['has-subnav']) %}#}
+        {#{% set link_classes = link_classes|merge(['has-subnav']) %}#}
+      {#{% endif %}#}
       {% if item.active_trail %}
         {% set item_classes = item_classes|merge(['is-active-trail']) %}
         {% set link_classes = link_classes|merge(['is-active-trail']) %}
@@ -63,6 +63,7 @@
       {% elseif item.submenu %}
         {% if menu_level == 0 %}
           {% set item_classes = item_classes|merge(['has-submenu']) %}
+          {% set link_classes = ['menu--link__sub'] %}
         {% elseif menu_level <= 2 %}
           {% set item_classes = item_classes|merge(['has-children']) %}
         {% endif %}
@@ -77,7 +78,17 @@
       } %}
 
       <li {{ add_attributes(additional_item_attributes) }}>
-        <a href="{{ item.url }}" {{ add_attributes(link_attributes) }}>
+        <a
+          {% if item.submenu %}
+            tabindex="0"
+            aria-haspopup="true"
+            role="button"
+          {% else %}
+            href="{{ item.url }}"
+            class="menu--link__only"
+          {% endif %}
+          {{ add_attributes(link_attributes) }}
+        >
           <span class="link-text">
             {% if item.title %}
               {{ item.title }}
diff --git a/source/_patterns/04-components/site-logo/_site-logo.scss b/source/_patterns/04-components/site-logo/_site-logo.scss
index c573df31..44964129 100644
--- a/source/_patterns/04-components/site-logo/_site-logo.scss
+++ b/source/_patterns/04-components/site-logo/_site-logo.scss
@@ -2,12 +2,17 @@
 // Styles for Site logo.
 
 .uw-site-logo {
-  background: url('../source/images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
-  background-color: #000;
-  background-size: contain;
-  color: #000;
-  display: block;
-  height: 2.688rem;
-  text-indent: -999rem;
-  width: 100%;
+  margin:0 auto;
+  width:12.5rem;
+  .uw-site-logo__link{
+    background: url('../source/images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
+    background-color: gesso-brand(org-default,uw-black,lvl4);
+    background-size: contain;
+    color: gesso-brand(org-default,uw-black,lvl4);
+    display: block;
+    height: 2.688rem;
+    text-align:center;
+    text-indent: -999rem;
+    width: 100%;
+  }
 }
-- 
GitLab