diff --git a/common/common.scss b/common/common.scss
index 0997d73..3416f5b 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -69,7 +69,7 @@ $divider-color: null !default;
 
   .wrap {
     display: flex;
-    justify-content: flex-start;
+    align-items: center;
 
     @if $Invert_position == "true" {
       justify-content: flex-end;
@@ -83,6 +83,9 @@ $divider-color: null !default;
     font-size: $font-up-1;
     line-height: $line-height-medium;
     transition: all 0.15s;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
 
     &:first-of-type {
       margin-left: -12px;
@@ -117,24 +120,16 @@ $divider-color: null !default;
     }
   }
 
-  .fa-caret-down {
-    margin-right: 0;
-    margin-left: 5px;
+  .d-icon-caret-down {
     transform: rotate(-90deg);
     transition: transform ease 0.15s;
 
     .rtl & {
-      margin-left: 0;
-      margin-right: 5px;
       transform: rotate(90deg);
     }
-
-    @if $Show_caret == "false" {
-      display: none;
-    }
   }
 
-  .d-dropdown-open .fa-caret-down {
+  .d-dropdown-open .d-icon-caret-down {
     transform: rotate(0);
   }
 }
@@ -163,7 +158,8 @@ $divider-color: null !default;
   }
 
   .d-dropdown-menu li > a {
-    display: block;
+    display: flex;
+    align-items: center;
     color: $submenu-item-color;
     text-decoration: none;
     line-height: 18px;
diff --git a/common/header.html b/common/header.html
index 5794c09..1e153ec 100644
--- a/common/header.html
+++ b/common/header.html
@@ -8,250 +8,119 @@
  *
  * @license: MIT license: http://opensource.org/licenses/MIT
 */
-if (jQuery)
-  (function($) {
-    $.extend($.fn, {
-      dDropdown: function(method, data) {
-        switch (method) {
-          case "show":
-            show(null, $(this));
-            return $(this);
-          case "hide":
-            hide();
-            return $(this);
-          case "attach":
-            return $(this).attr("data-d-dropdown", data);
-          case "detach":
-            hide();
-            return $(this).removeAttr("data-d-dropdown");
-          case "disable":
-            return $(this).addClass("d-dropdown-disabled");
-          case "enable":
-            hide();
-            return $(this).removeClass("d-dropdown-disabled");
-        }
-      }
-    });
-
-    function show(event, object) {
-      var trigger = event ? $(this) : object,
-        dDropdown = $(trigger.attr("data-d-dropdown")),
-        isOpen = trigger.hasClass("d-dropdown-open");
-
-      if (event) {
-        if ($(event.target).hasClass("d-dropdown-ignore")) return;
-
-        event.preventDefault();
-        event.stopPropagation();
-      } else {
-        if (
-          trigger !== object.target &&
-          $(object.target).hasClass("d-dropdown-ignore")
-        )
-          return;
-      }
-      hide();
-
-      if (isOpen || trigger.hasClass("d-dropdown-disabled")) return;
-
-      trigger.addClass("d-dropdown-open");
-      dDropdown.data("d-dropdown-trigger", trigger).show();
-
-      position();
-
-      dDropdown.trigger("show", {
-        dDropdown: dDropdown,
-        trigger: trigger
-      });
-    }
-
-    function hide(event) {
-      var targetGroup = event
-        ? $(event.target)
-            .parents()
-            .addBack()
-        : null;
-
-      if (targetGroup && targetGroup.is(".d-dropdown")) {
-        if (targetGroup.is(".d-dropdown-menu")) {
-          if (!targetGroup.is("A")) return;
-        } else {
-          return;
-        }
-      }
-
-      $(document)
-        .find(".d-dropdown:visible")
-        .each(function() {
-          var dDropdown = $(this);
-          dDropdown
-            .hide()
-            .removeData("d-dropdown-trigger")
-            .trigger("hide", { dDropdown: dDropdown });
-        });
-
-      $(document)
-        .find(".d-dropdown-open")
-        .removeClass("d-dropdown-open");
-    }
-
-    function position() {
-      var dDropdown = $(".d-dropdown:visible").eq(0),
-        trigger = dDropdown.data("d-dropdown-trigger"),
-        hOffset = trigger
-          ? parseInt(trigger.attr("data-horizontal-offset") || 0, 10)
-          : null,
-        vOffset = trigger
-          ? parseInt(trigger.attr("data-vertical-offset") || 0, 10)
-          : null;
-
-      if (dDropdown.length === 0 || !trigger) return;
-
-      if (dDropdown.hasClass("d-dropdown-relative")) {
-        dDropdown.css({
-          left: dDropdown.hasClass("d-dropdown-anchor-right")
-            ? trigger.position().left -
-              (dDropdown.outerWidth(true) - trigger.outerWidth(true)) -
-              parseInt(trigger.css("margin-right"), 10) +
-              hOffset
-            : trigger.position().left +
-              parseInt(trigger.css("margin-left"), 10) +
-              hOffset,
-          top:
-            trigger.position().top +
-            trigger.outerHeight(true) -
-            parseInt(trigger.css("margin-top"), 10) +
-            vOffset
-        });
-      } else {
-        dDropdown.css({
-          left: dDropdown.hasClass("d-dropdown-anchor-right")
-            ? trigger.offset().left -
-              (dDropdown.outerWidth() - trigger.outerWidth()) +
-              hOffset
-            : trigger.offset().left + hOffset,
-          top: trigger.offset().top + trigger.outerHeight() + vOffset
-        });
-      }
-    }
-
-    $(document).on("click.d-dropdown", "[data-d-dropdown]", show);
-    $(document).on("click.d-dropdown", hide);
-    $(document).on("scroll", hide);
-    $(window).on("resize", position);
-  })(jQuery);
+jQuery&&function(n){function o(d,t){var o=d?n(this):t,r=n(o.attr("data-d-dropdown")),e=o.hasClass("d-dropdown-open");if(d){if(n(d.target).hasClass("d-dropdown-ignore"))return;d.preventDefault(),d.stopPropagation()}else if(o!==t.target&&n(t.target).hasClass("d-dropdown-ignore"))return;s(),e||o.hasClass("d-dropdown-disabled")||(o.addClass("d-dropdown-open"),r.data("d-dropdown-trigger",o).show(),a(),r.trigger("show",{dDropdown:r,trigger:o}))}function s(d){var t=d?n(d.target).parents().addBack():null;if(t&&t.is(".d-dropdown")){if(!t.is(".d-dropdown-menu"))return;if(!t.is("A"))return}n(document).find(".d-dropdown:visible").each(function(){var d=n(this);d.hide().removeData("d-dropdown-trigger").trigger("hide",{dDropdown:d})}),n(document).find(".d-dropdown-open").removeClass("d-dropdown-open")}function a(){var d=n(".d-dropdown:visible").eq(0),t=d.data("d-dropdown-trigger"),o=t?parseInt(t.attr("data-horizontal-offset")||0,10):null,r=t?parseInt(t.attr("data-vertical-offset")||0,10):null;0!==d.length&&t&&(d.hasClass("d-dropdown-relative")?d.css({left:d.hasClass("d-dropdown-anchor-right")?t.position().left-(d.outerWidth(!0)-t.outerWidth(!0))-parseInt(t.css("margin-right"),10)+o:t.position().left+parseInt(t.css("margin-left"),10)+o,top:t.position().top+t.outerHeight(!0)-parseInt(t.css("margin-top"),10)+r}):d.css({left:d.hasClass("d-dropdown-anchor-right")?t.offset().left-(d.outerWidth()-t.outerWidth())+o:t.offset().left+o,top:t.offset().top+t.outerHeight()+r}))}n.extend(n.fn,{dDropdown:function(d,t){switch(d){case"show":return o(null,n(this)),n(this);case"hide":return s(),n(this);case"attach":return n(this).attr("data-d-dropdown",t);case"detach":return s(),n(this).removeAttr("data-d-dropdown");case"disable":return n(this).addClass("d-dropdown-disabled");case"enable":return s(),n(this).removeClass("d-dropdown-disabled")}}}),n(document).on("click.d-dropdown","[data-d-dropdown]",o),n(document).on("click.d-dropdown",s),n(document).on("scroll",s),n('.top-menu .wrap').on("scroll",s),n(window).on("resize",a)}(jQuery);
 </script>
 
     
 <script type="text/discourse-plugin" version="0.8.23">
-const { iconHTML } = require("discourse-common/lib/icon-library");
 
-let sec = "",
-  seg = "",
+function cleanUp(item) {
+  return item.replace(/\s+/g, "-").toLowerCase();
+}
+
+function exists(item) {
+  return (
+    item &&
+    item.length &&
+    item !== "null" &&
+    item !== "none" &&
+    item !== "None" &&
+    item !== " " &&
+    item !== ""
+  );
+}
+
+const { iconHTML } = require("discourse-common/lib/icon-library"),
+  rtlClass = settings.RTL_support ? "d-dropdown-anchor-right" : "",
+  caret = settings.Show_caret
+    ? iconHTML("caret-down", { class: "header-menu-caret" })
+    : "";
+
+let sec = $.map(settings.Menu_items.split("|"), $.trim),
+  seg = $.map(settings.Submenu_items.split("|"), $.trim),
   rawMain = "",
   mainUl = "";
 
-sec = $.map(settings.Menu_items.split("|"), $.trim);
-seg = $.map(settings.Submenu_items.split("|"), $.trim);
-rtl = settings.RTL_support;
-
-if (rtl) {
-  rtlClass = "d-dropdown-anchor-right";
-} else {
-  rtlClass = "";
-}
-
 $.each(sec, function() {
-  var sec = $.map(this.split(","), $.trim);
-  var icon = sec[1].length && sec[1] != 'none' ? iconHTML(sec[1]) : '';
-  rawMain +=
-    '<a data-d-dropdown="#' +
-    sec[0] +
-    '" class="' +
-    sec[3] +
-    '" title="' +
-    sec[2] +
-    '">' +
-    icon +
-    sec[0] + 
-    iconHTML("caret-down") +
-    '</a><div id="' +
-    sec[0] +
-    '" class="d-dropdown ' +
-    rtlClass +
-    '"><ul class="d-dropdown-menu"></ul></div>';
+  const sec = $.map(this.split(","), $.trim),
+    text = sec[0],
+    trigger = cleanUp(sec[0]),
+    title = sec[2],
+    viewClass = sec[3],
+    icon = exists(sec[1])
+      ? iconHTML(cleanUp(sec[1]), { class: "header-menu-icon" })
+      : "";
+
+  rawMain += `<a
+              data-d-dropdown="#${trigger}"
+              class="${viewClass} ${trigger}"
+              title="${title}">
+                ${icon}
+                ${text}
+                ${caret}
+             </a>
+             <div id="${trigger}" class="d-dropdown ${rtlClass}">
+               <ul class="d-dropdown-menu"></ul>
+             </div>`;
 });
 
 $("#top-menu .wrap").html(rawMain);
 
 $.each(sec, function() {
-  var sec = $.map(this.split(","), $.trim);
-  mainUl = $("#" + sec[0] + " ul").html();
+  let sec = $.map(this.split(","), $.trim),
+    mainUl = "";
 
   $.each(seg, function() {
-    var seg = $.map(this.split(","), $.trim),
-      itemClass = seg[1].replace(/\s+/g, "-").toLowerCase();
+    const seg = $.map(this.split(","), $.trim),
+      parentMenu = cleanUp(sec[0]),
+      parentName = cleanUp(seg[0]),
+      text = seg[1],
+      itemClass =
+        seg[4] === "blank" ? `${cleanUp(seg[1])} blank` : cleanUp(seg[1]),
+      href = seg[3],
+      target = seg[4] === "blank" ? "_blank" : "_self",
+      title = exists(seg[5]) ? seg[5] : "",
+      icon = exists(seg[2])
+        ? iconHTML(cleanUp(seg[2]), { class: "header-menu-icon" })
+        : "";
 
-    if (sec[0] == seg[0]) {
-      if (seg[1] == "divider") {
-        mainUl += "<li class='divider'></li>";
-        return $("#" + sec[0] + " ul").html(mainUl);
+    if (parentName === parentMenu) {
+      if (text === "divider") {
+        mainUl += `<li class='divider'></li>`;
+        return $(`#${parentMenu} ul`).html(mainUl);
       }
 
-      if (seg[2] == null || seg[2] == " ") {
-        seg[2] = "";
-      }
-      
-      var icon = seg[2].length && seg[2] != 'none' ? iconHTML(seg[2]) : '';
-
-      if (seg[4] == "blank") {
-        seg[4] = "_blank";
-        itemClass += " blank ";
-      } else {
-        seg[4] = "_self";
-      }
-
-      if (seg[5] == null || seg[5] == " ") {
-        seg[5] = "";
-      }
-
-      mainUl +=
-        '<li class="submenu-item ' +
-        itemClass +
-        '"><a target="' +
-        seg[4] +
-        '" title="' +
-        seg[5] +
-        '" class="submenu-link" href="' +
-        seg[3] +
-        '">' +
-        icon +
-        seg[1] +
-        "</li>";
-      $("#" + sec[0] + " ul").html(mainUl);
+      mainUl += `<li class="submenu-item ${itemClass}">
+                  <a
+                  target="${target}"
+                  title="${title}"
+                  class="submenu-link"
+                  href="${href}">
+                    ${icon}
+                    ${text}
+                  </a>
+                </li>`;
+      $(`#${parentMenu} ul`).html(mainUl);
     }
   });
 });
 
-$(function() {
-  $(".d-dropdown-menu li:not(.blank) a").click(function() {
-    require("discourse/lib/url").default.routeTo(
-      $(event.currentTarget).attr("href")
-    );
-    $(document)
-      .find(".d-dropdown:visible")
-      .each(function() {
-        var dDropdown = $(this);
-        dDropdown
-          .hide()
-          .removeData("d-dropdown-trigger")
-          .trigger("hide", { dDropdown: dDropdown });
-      });
-    $(document)
-      .find(".d-dropdown-open")
-      .removeClass("d-dropdown-open");
-    return false;
-  });
+$(".d-dropdown-menu li:not(.blank) a").click(function() {
+  require("discourse/lib/url").default.routeTo(
+    $(event.currentTarget).attr("href")
+  );
+  $(document)
+    .find(".d-dropdown:visible")
+    .each(function() {
+      var dDropdown = $(this);
+      dDropdown
+        .hide()
+        .removeData("d-dropdown-trigger")
+        .trigger("hide", { dDropdown: dDropdown });
+    });
+  $(document)
+    .find(".d-dropdown-open")
+    .removeClass("d-dropdown-open");
+  return false;
 });
-
 </script>
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
index dbc17ba..2b9d699 100644
--- a/mobile/mobile.scss
+++ b/mobile/mobile.scss
@@ -7,7 +7,7 @@
   }
 }
 
-.top-menu .wrap>a:first-of-type {
+.top-menu .wrap > a:first-of-type {
   margin-left: -10px;
 
   .rtl & {
@@ -18,3 +18,20 @@
 .vdo {
   display: none;
 }
+
+.top-menu .wrap {
+  overflow-x: scroll;
+  > a {
+    white-space: nowrap;
+  }
+}
+
+// handles last menu item dropdown position
+.top-menu .wrap > div:last-of-type {
+  left: unset !important;
+  right: 0 !important;
+  .rtl & {
+    left: 0 !important;
+    right: unset !important;
+  }
+}
diff --git a/settings.yml b/settings.yml
index a443a0a..1aa5934 100644
--- a/settings.yml
+++ b/settings.yml
@@ -2,67 +2,67 @@ Menu_items:
   type: list
   default: "Design, magic, Get inspired!, vdm|Code, far-keyboard, Learn new things!, vdm|Business, far-money-bill-alt, Start a new career!, vdm|Shop, shopping-cart, Buy cool stuff!, vdo|More, none, Even more cool things!, vdo"
   description:
-    en: 'Add menu items. One item per line in this order: Text, icon, title, view.<br><b>Text:</b> what appears on the menu.<br><b>Icon:</b> the icon displayed next to the item. If you do not want to use an icon, use `none`<br><b>Title:</b> the text that appears when the item is hovered.<br><b>View:</b> Choose what devices the item appears on. `vdm` appears on both desktop and mobile, `vdo` appears on desktops only, `vmo` appears on mobiles only. Due to lack of space, it is reccomended to not add more than 3-4 items on mobile.'
+    en: "Add menu items. One item per line in this order: Text, icon, title, view.<br><b>Text:</b> what appears on the menu.<br><b>Icon:</b> the icon displayed next to the item. If you do not want to use an icon, use `none`<br><b>Title:</b> the text that appears when the item is hovered.<br><b>View:</b> Choose what devices the item appears on. `vdm` appears on both desktop and mobile, `vdo` appears on desktops only, `vmo` appears on mobiles only. Due to lack of space, it is reccomended to not add more than 3-4 items on mobile."
 Submenu_items:
   type: list
-  default: "Design, Galleries, th, #, blank, Cool galleries for you to look at.|Design, Design process, far-lightbulb, #, blank, Learn the basics.|Design, Blog design, columns, #, blank, What makes for a great blog?|Design, divider|Design, Freebies, gift, #, blank, Everyone likes freebies!|Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.|Design, Design trends, far-chart-bar, #, blank, Stay on top of the current trends! |Code, fab-wordpress, wordpress, #, blank, Wordpress code examples|Code, Tools, wrench, #, blank, Tools that will make your life easier!|Code, Tutorials, fab-leanpub, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, none, #, blank, Why not start a blog?|Business, Social media, none, #, blank, Learn how to leverage Social media and make it work for your business |Business, Make money, none, #, blank, Everyone like to be paid!|Business, Marketing, none, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, none, #, blank,|Shop, Textures, none, #, blank,|Shop, Brushes, none, #, blank,|Shop, divider|Shop, UI kits, none, #, blank,|Shop, Templates , none, #, blank,|Shop, PSDs, none, #, blank,|More, About us, none, /about, self, Meet the gang!|More, Contact us, none, #, blank, Let's get in touch|More, Terms of Service, none, /tos, self, |More, Privacy policy, none, /privacy, self"
+  default: "Design, Galleries, th, #, blank, Cool galleries for you to look at.|Design, Design process, far-lightbulb, #, blank, Learn the basics.|Design, Blog design, columns, #, blank, What makes for a great blog?|Design, divider|Design, Freebies, gift, #, blank, Everyone likes freebies!|Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.|Design, Design trends, far-chart-bar, #, blank, Stay on top of the current trends! |Code, Wordpress, wordpress, #, blank, Wordpress code examples|Code, Tools, wrench, #, blank, Tools that will make your life easier!|Code, Tutorials, fab-leanpub, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, none, #, blank, Why not start a blog?|Business, Social media, none, #, blank, Learn how to leverage Social media and make it work for your business |Business, Make money, none, #, blank, Everyone like to be paid!|Business, Marketing, none, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, none, #, blank,|Shop, Textures, none, #, blank,|Shop, Brushes, none, #, blank,|Shop, divider|Shop, UI kits, none, #, blank,|Shop, Templates , none, #, blank,|Shop, PSDs, none, #, blank,|More, About us, none, /about, self, Meet the gang!|More, Contact us, none, #, blank, Let's get in touch|More, Terms of Service, none, /tos, self, |More, Privacy policy, none, /privacy, self"
+  description:
+    en: "Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title.<br><b>Parent:</b> the name of the parent menu item which this submenu item show under. Use the `text` value from the list above<br><b>Text:</b> the text that shows for this submenu item.<br><b>Icon:</b> the icon for this submenu item, use `none` if no icon is needed<br><b>URL:</b> the path this menu item links to. You can use relative paths as well.<br><b>Target:</b> Choose whether this item will open in a new tab or in the same tab. Use `blank` to open the link in a new tab, or use `self` to open it in the same tab.<br><b>Title:</b> the text that shows when the item is hovered.<br><b>Dividers:</b> You can also add dividers between submenu items. To add a divider user `parent, divider`"
+Svg_icons:
+  type: "list"
+  list_type: "compact"
+  default: "fa-magic|far-keyboard|far-money-bill-alt|fa-shopping-cart|far-lightbulb|fa-columns|fa-gift|fa-book|far-chart-bar|fab-wordpress|fa-wrench|fab-leanpub"
   description:
-    en: 'Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title.<br><b>Parent:</b> the name of the parent menu item which this submenu item show under. Use the `text` value from the list above<br><b>Text:</b> the text that shows for this submenu item.<br><b>Icon:</b> the icon for this submenu item, use `none` if no icon is needed<br><b>URL:</b> the path this menu item links to. You can use relative paths as well.<br><b>Target:</b> Choose whether this item will open in a new tab or in the same tab. Use `blank` to open the link in a new tab, or use `self` to open it in the same tab.<br><b>Title:</b> the text that shows when the item is hovered.<br><b>Dividers:</b> You can also add dividers between submenu items. To add a divider user `parent, divider`'
-Svg_icons: 
-  type: 'list'
-  list_type: 'compact'
-  default: 'fa-magic|far-keyboard|far-money-bill-alt|fa-shopping-cart|far-lightbulb|fa-columns|fa-gift|fa-book|far-chart-bar|fab-wordpress|fa-wrench|fab-leanpub'
-  description: 
     en: "Include FontAwesome icon classes for each icon used in the lists above."
 Fixed_mode:
   default: false
   description:
-    en: 'Force the menu to be visible on top regardless of scroll - Desktop only'
+    en: "Force the menu to be visible on top regardless of scroll - Desktop only"
 Show_caret:
   default: true
   description:
-    en: 'Show caret icon next to menu items'
+    en: "Show caret icon next to menu items"
 Invert_position:
   default: false
   description:
-    en: 'Display menu items on the opposite side of the screen'
+    en: "Display menu items on the opposite side of the screen"
 RTL_support:
   default: false
   description:
-    en: 'Enable RTL support'
+    en: "Enable RTL support"
 Menu_background:
-  default: ''
+  default: ""
   description:
-    en: 'Background color for the menu'
+    en: "Background color for the menu"
 Menu_item_color:
-  default: ''
+  default: ""
   description:
-    en: 'Color for menu items'
+    en: "Color for menu items"
 Menu-item-active-background:
-  default: ''
+  default: ""
   description:
-    en: 'Background color for menu items when active'
+    en: "Background color for menu items when active"
 Menu-item-active-color:
-  default: ''
+  default: ""
   description:
-    en: 'Color for menu items when active'
+    en: "Color for menu items when active"
 Submenu_background:
-  default: ''
+  default: ""
   description:
-    en: 'Background color for submenus'
+    en: "Background color for submenus"
 Submenu_item_color:
-  default: ''
+  default: ""
   description:
-    en: 'Color for submenu items'
+    en: "Color for submenu items"
 Submenu_item_hover_background:
-  default: ''
+  default: ""
   description:
-    en: 'Background color for submenus items when hovered'
+    en: "Background color for submenus items when hovered"
 Submenu_item_hover_color:
-  default: ''
+  default: ""
   description:
-    en: 'Color for submenus items when hovered'
+    en: "Color for submenus items when hovered"
 Divider_color:
-  default: ''
+  default: ""
   description:
-    en: 'Color for divider lines in submenus'
+    en: "Color for divider lines in submenus"