diff --git a/drupal/themes/fuq/css/uq.css b/drupal/themes/fuq/css/uq.css
index e0dc9dc..a3b4591 100644
Binary files a/drupal/themes/fuq/css/uq.css and b/drupal/themes/fuq/css/uq.css differ
diff --git a/drupal/themes/fuq/css/uq.css.map b/drupal/themes/fuq/css/uq.css.map
index 36949c9..bc5597e 100644
Binary files a/drupal/themes/fuq/css/uq.css.map and b/drupal/themes/fuq/css/uq.css.map differ
diff --git a/drupal/themes/fuq/js/uq.mobile-menu.js b/drupal/themes/fuq/js/uq.mobile-menu.js
index b56ec2e..156bd0b 100644
--- a/drupal/themes/fuq/js/uq.mobile-menu.js
+++ b/drupal/themes/fuq/js/uq.mobile-menu.js
@@ -1,74 +1,20 @@
 (function ($) {
-    $(document).ready(function(){
-    var width= $(window).width(), height = $(window).height();
-
-     /* if on small device, setup mobile menu, else setup large */
-    if ($(window).width() < 769) {
-      set_mobile_menu();
-    } else {
-      set_large_menu();
-    }
-
-    /* show dropdown menu */
-    $("uq-top-menu").find("li.expanded").hover(
-      function() {
-        $(this).find("ul").show();
-      }, function() {
-        $(this).find("ul").hide();
+  $(document).ready(function() {
+    // add button for expanding drop down lists
+    $('<a class="menu-item-expand-link dropdown-closed"><img src="https://eait.uqstatic.net/lib/iconic/open-iconic-1.1.1/svg/chevron-bottom.svg" class="inject-me menu-item-expand-icon open" /><img src="https://eait.uqstatic.net/lib/iconic/open-iconic-1.1.1/svg/chevron-top.svg" class="inject-me menu-item-expand-icon close"></a>').insertAfter( $("#top-menu-inner .menu-block-wrapper ul.menu:first-of-type .expanded > a"));
+
+    // toggle expandable items
+    $(".menu-item-expand-link").click(function() {
+      $(this).next(".menu").toggleClass("expanded");
+      $(this).toggleClass("dropdown-closed dropdown-open");
     });
 
-    /* set menu to mobile view */
-    function set_mobile_menu() {
-      $("#menu-button").css("display", "block");
-      $("ul.menu").first().addClass("mobile-menu");
-      $("ul.menu").first().hide();
-      if ($("ul.menu").first().hasClass("large-menu")) {
-        $("ul.menu").first().removeClass("large-menu");
-      }
-    }
-
-    /* set menu to large view */
-    function set_large_menu() {
-      $("#menu-button").css("display", "none");
-      $("ul.menu").first().addClass("large-menu");
-      $("ul.menu").first().show();
-      if ($("ul.menu").first().hasClass("mobile-menu")) {
-        $("ul.menu").first().removeClass("mobile-menu");
-      }
-    }
-
-
-    /* set display of menu to block */
-    function show_menu() {
-      $("ul.menu").first().slideDown();
-    }
-
-    /* set display of menu to none */
-    function hide_menu() {
-      $("ul.menu").first().slideUp();
-    }
-
-    /* display or hide mobile menu on button click */
-    $("#menu-button").click(function(e) {
-      e.preventDefault();
-      if ($("ul.menu").first().css("display") != "block") {
-        show_menu();
-      } else {
-        hide_menu();
-      }
+    // toggle dropdown menu show/hide
+    $("#menu-button").click(function() {
+      $(this).toggleClass("mobile-menu-open");
+      $(this).parent().find("ul.menu").first().toggleClass("expand");
     });
 
-    /* add or remove the mobile-menu class on screen resize */
-    $(window).resize(function() {
-      if ($(window).width() != width) {
-        if ($(window).width() < 769) {
-          set_mobile_menu();
-        } else {
-          set_large_menu();
-        }
-        width = $(window).width();
-        height = $(window).height();
-      }
-    });
-    });
-})(jQuery);
+    SVGInjector(document.querySelectorAll("img.inject-me"));
+  });
+}) (jQuery);
diff --git a/drupal/themes/fuq/template.php b/drupal/themes/fuq/template.php
index 205b789..4d983c2 100755
--- a/drupal/themes/fuq/template.php
+++ b/drupal/themes/fuq/template.php
@@ -89,7 +89,9 @@ function fuq_preprocess_html(&$vars, $hook) {
     $vars['classes_array'][] = $c['container_width_default'];
   }
 
-  drupal_add_js(drupal_get_path('theme', 'fuq') . '/js/uq.mobile-menu.js', array('scope' => 'header', 'weight' => '15'));
+  drupal_add_js('https://eait.uqstatic.net/lib/SVGInjector/SVGInjector-1.1.3/svg-injector.js', array('scope' => 'header', 'weight' => '16'));
+  drupal_add_js(drupal_get_path('theme', 'fuq') . '/js/uq.mobile-menu.js', array('scope' => 'header', 'weight' => '16'));
+  #drupal_add_js('SVGInjector(document.querySelectorAll("img.inject-me"));', [ 'type' => 'inline', 'scope' => 'footer' ]);
 }
 
 function fuq_process_html(&$vars) {
diff --git a/drupal/themes/fuq/templates/page.tpl.php b/drupal/themes/fuq/templates/page.tpl.php
index 29efc9d..3a50fa8 100755
--- a/drupal/themes/fuq/templates/page.tpl.php
+++ b/drupal/themes/fuq/templates/page.tpl.php
@@ -40,7 +40,10 @@
 <div class="<?php print $menu_style; ?>">
   <div id="uq-top-menu">
      <div id="top-menu-inner" class="container <?php print $container_width_header_footer; ?>">
-      <a id="menu-button"><img /></a>
+      <a id="menu-button">
+        <img src="https://eait.uqstatic.net/lib/iconic/open-iconic-1.1.1/svg/menu.svg" class="inject-me mobile-menu-icon open" />
+        <img src="https://eait.uqstatic.net/lib/iconic/open-iconic-1.1.1/svg/x.svg" class="inject-me mobile-menu-icon close" />
+      </a>
       <?php print render($page['top_menu']); ?>
     </div>
   </div>
diff --git a/fuq.css/_branding.scss b/fuq.css/_branding.scss
index ba6a007..52dca50 100644
--- a/fuq.css/_branding.scss
+++ b/fuq.css/_branding.scss
@@ -1,152 +1,4 @@
 
-
-#uq-top-menu {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  line-height: 1;
-  @include clearfix;
-
-  .legacy-style & {
-    background: black;
-    color: white;
-    @include rem-size(font-size, 12px);
-    ul.menu {
-    }
-  }
-  .foundation-style & {
-    background: white;
-    color: black;
-    ul.menu {
-    }
-  }
-
-  #uq-top-menu-inner {
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  ul.menu {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    float: left;
-
-    li {
-      margin: 0;
-      padding: 0;
-      float: left;
-      list-style: none;
-      background: none;
-      position: relative;
-
-      &.active > a:first-child:not(.button) {
-        font-weight: inherit;
-      }
-      .foundation-style &:hover > a {
-        background: $menu-hover;
-      }
-
-      a {
-        .legacy-style & {
-          text-transform: uppercase;
-          letter-spacing: 1px;
-          color: #dfdfdf;
-          padding: 0.5em 1em;
-        }
-        .foundation-style & {
-          color: inherit;
-          padding: 1.5em 2em;
-        }
-        display: block;
-        margin: 0;
-        text-decoration: none;
-
-        &:visited {
-          .legacy-style & {
-            color: #fff;
-          }
-          text-decoration: none;
-        }
-        &:hover {
-          .legacy-style & {
-            background: #333;
-            color: #fff;
-          }
-          .foundation-style & {
-            background: $menu-hover;
-          }
-
-          ul.menu {
-            display: block;
-          }
-        }
-        .legacy-style &:active {
-          background: #61227d;
-        }
-        .foundation-style &:active {
-          background: $menu-hover;
-        }
-
-        .legacy-style &.active-trail {
-          background: #222;
-        }
-      }
-
-      &:hover {
-        & a {
-          .legacy-style &.active {
-            background: $uq-gray;
-          }
-          .foundation-style &.active {
-            background: $menu-hover;
-          }
-        }
-        ul.menu {
-          display: block;
-        }
-      }
-
-      /* Drop down menu */
-      ul.menu {
-        display: none;
-        width: auto;
-        position: absolute;
-        z-index: 1000;
-        .legacy-style & {
-          background: #000; //lighten($uq-gray, 10%);
-        }
-        .foundation-style & {
-          background: $menu-hover;
-        }
-
-        /* Drop down menu items */
-        li {
-          display: block;
-          margin: 0;
-          float: none;
-          position: relative;
-          .foundation-style & {
-            border-top: 1px solid $sub-menu-hover;
-          }
-
-          a {
-            white-space: nowrap;
-            text-transform: none;
-            .legacy-style & {
-              padding: 0.5em 2em;
-            }
-            .foundation-style &:hover {
-              background: $sub-menu-hover;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .uq-content {
   @include rem-size(padding, $base-font-size 0);
   @include rem-size(min-height, $base-font-size * 20);
diff --git a/fuq.css/_menu.scss b/fuq.css/_menu.scss
index a7bc0a4..34d595b 100644
--- a/fuq.css/_menu.scss
+++ b/fuq.css/_menu.scss
@@ -2,6 +2,251 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
+#uq-top-menu {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  line-height: 1;
+  @include clearfix;
+
+  .foundation-style & {
+    background: white;
+    color: $body-font-color;
+  }
+  .legacy-style & {
+    background: black;
+    color: white;
+    @include rem-size(font-size, 12px);
+  }
+
+  ul.menu {
+    margin: 0 auto;
+    padding: 0;
+    margin-left: 0;
+    width: 100%;
+    list-style: none;
+    float: left;
+    li {
+      margin: 0;
+      padding: 0;
+      position: relative;
+      @include clearfix;
+      ul {
+        display: none;
+      }
+    }
+  }
+  /* top menu on large screens */
+  @media only screen and (min-width: $row-width) {
+    #menu-button {
+      display: none;
+    }
+
+    #top-menu-inner ul.menu li {
+      float: left;
+      &:hover {
+        .foundation-style & {
+          a {
+            background: $menu-hover;
+          }
+        }
+        .legacy-style & {
+          a {
+            background: $legacy-menu-hover;
+          }
+        }
+        ul {
+          display: block;
+        }
+      }
+      a {
+        text-decoration: none;
+        &.menu-item-expand-link {
+          display: none;
+        }
+        .foundation-style & {
+          color: inherit;
+          padding: 1.5em 2em;
+          border-bottom: 2px solid transparent;
+          &.active.active-trail, &.active {
+            border-bottom: 2px solid $uq-purple;
+          }
+          &.active-trail {
+            border-bottom: 2px solid tint($uq-purple, $shade-tint);
+          }
+        }
+        .legacy-style & {
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          color: $uq-light-gray;
+          padding: 0.5em 1em;
+          text-decoration: none;
+          &.visited {
+            color: #fff;
+          }
+          &:hover {
+            background: $legacy-menu-hover;
+          }
+        }
+        &:hover ~ ul {
+          display: block;
+        }
+      }
+
+      // dropdown
+      ul.menu {
+        position: absolute;
+        z-index: 1000;
+        li {
+          display: block;
+          margin: 0;
+          width: 15rem;
+          width: 240px;
+          .foundation-style & {
+            border-top: 1px solid $sub-menu-hover;
+            background: $menu-hover;
+            a {
+              &:hover {
+                background: $sub-menu-hover;
+              }
+              &.active {
+                border-bottom: 2px solid transparent;
+                border-left: 2px solid $uq-purple;
+                background: $sub-menu-hover;
+              }
+            }
+          }
+          .legacy-style & {
+            border-top: 1px solid $legacy-menu;
+            background: $legacy-sub-menu;
+            a {
+              &:hover {
+                background: $legacy-menu;
+              }
+              &.active {
+                background: $legacy-menu;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* top menu on small screens */
+  @media only screen and (max-width: $row-width - 1) { //$screen-small - 1) {
+    #top-menu-inner {
+      a#menu-button {
+        display: block;
+        float: right;
+        margin: 16px 16px 20px 16px;
+        .mobile-menu-icon {
+          width: 25px;
+          height: 25px;
+          .legacy-style & {
+            fill: white;
+          }
+        }
+        &.mobile-menu-open {
+          .open {
+            display: none;
+          }
+          .close {
+            display: block;
+          }
+        }
+        .open {
+          display: block;
+        }
+        .close {
+          display: none;
+        }
+      }
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      ul {
+        display: none;
+        &.expand {
+          display: block;
+        }
+        li {
+          ul.menu {
+            display: none;
+            &.expanded {
+              display: block;
+            }
+            a {
+              padding-left: 2.6rem;
+              .foundation-style & {
+                background: $uq-light-gray;
+              }
+              .legacy-style & {
+                background: $legacy-sub-menu;
+              }
+            }
+          }
+          a {
+            display: block; // needed?
+            color: inherit; // needed?
+            padding: 1.3em 1.5em;
+            .foundation-style & {
+              border-bottom: 1px solid #d9d9d9;
+            }
+            .legacy-style & {
+              border-bottom: 1px solid #333;
+            }
+            &:hover {
+              text-decoration: none;
+            }
+            &.active {
+              border-left: 2px solid $uq-purple !important;
+            }
+            &.active-trail {
+              border-left: 2px solid tint($uq-purple, $shade-tint);
+            }
+            &.menu-item-expand-link {
+              .foundation-style & {
+                border-left: 1px solid #d9d9d9;
+              }
+              .legacy-style & {
+                border-left: 1px solid #333;
+              }
+              position: absolute;
+              right: 0;
+              top: 0;
+              padding: 1.82em 1.3em;
+              height: 100%;
+              fill: $uq-blue;
+              &:hover, &.dropdown-open {
+                background: $uq-light-gray;
+                .legacy-style & {
+                  background: $legacy-sub-menu;
+                }
+                .open {
+                  display: none;
+                }
+                .close {
+                  display: block;
+                }
+              }
+              &.dropdown-closed {
+                .open {
+                  display: block;
+                }
+                .close {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
 .menu {
   display: block;
   margin: 0;
diff --git a/fuq.css/_settings.scss b/fuq.css/_settings.scss
index 291e2c6..887b398 100644
--- a/fuq.css/_settings.scss
+++ b/fuq.css/_settings.scss
@@ -2,7 +2,7 @@ $base-font-size: 15px;
 $rem-base: $base-font-size;
 
 $uq-gray: #333;
-
+$uq-light-gray: #F2F2F2;
 $uq-purple: #49075E;
 $uq-green: #8CB800;
 $uq-gold: #BDA14E;
@@ -32,8 +32,13 @@ $success-color: #5cb85c;
 $warning-color: #f0ad4e;
 $danger-color: #d9534f;
 
-$menu-hover: #eee; // future-students
-$sub-menu-hover: #e5e5e5;
+// menu colours
+$menu-hover: #e7e7e7; // FUQ. Based on ITS, e.g. future-students, omc, new school and faculties.
+$sub-menu-hover: #d9d9d9; // FUQ
+$legacy-menu: #000;
+$legacy-sub-menu: $uq-gray;
+$legacy-menu-hover: $uq-gray;
+$legacy-sub-menu-hover: #444;
 
 $states: (
   'success': $success-color,