SubMenu adjustments to achieve a bit of #21.

src/assets/js/js.js

@@ -130,10 +130,7 @@ jQuery( document ).ready(function( $ ) {
 		}
 		var $subMenu = $(this).next(".dropdown-menu");
 		$subMenu.toggleClass('show');
-		if($subMenu.hasClass('show')) {
-			$subMenu.find('.dropdown-submenu').attr('style', 'padding-left: 3rem !important');
-			$subMenu.find('.dropdown-item').attr('style', 'padding-left: 3rem');
-		}
+
 		return false;
 	});
 	

src/assets/scss/style.scss

@@ -98,26 +98,44 @@ body.loading-content main:before {
     }
 }
 
-.menu-item-has-children {
-    .dropdown-submenu {
-        padding: 0.35rem 0 0.35rem 0.5rem !important;
-        margin-left: 0.5rem;
-    }
-    .dropdown-menu {
-        .show {
-            border-top: none;
-            margin-left: -1px;
-        }
-    }
+.dropdown.menu-item-has-children {
+    display: inline-flex;
+    flex-wrap: wrap;
 
+    .dropdown-submenu {
+        padding: 0.35rem 0 0.35rem 0.5rem;
+    }
     ul.show {
         li {
-            &.current_page_item, &.current-menu-item{
+            &.current_page_item, &.current-menu-item {
                 > a {
-                    border-bottom: 1px solid #298596;
+                    border: none;
                     background-color: #d9eced;
                 }
             }
+            .dropdown-menu {
+                &.show {
+                    position: relative;
+                    width: 100%;
+                    margin-left: 8px;
+                    border-left: none !important;
+                    border-right: none !important;
+                    animation: sub-menu-expand 0.5s linear;
+                }
+            }
+        }
+    }
+    @media screen and (max-width: 768px) {
+        display: flex;
+
+        ul.show {
+            position: relative;
+            width: 100%;
+            top: 0;
+            margin-left: 16px;
+            border-left: none !important;
+            border-right: none !important;
+            animation: sub-menu-expand 0.5s linear;
         }
     }
 }
@@ -270,10 +288,8 @@ nav{
             .tainacan-icon-close { display: block !important; }
         }
     }
-    .dropdown-menu .menu-item {
-        &:hover .dropdown-item {
-            background-color: #cbcbcb;
-        }
+    .dropdown-item:hover {
+        background-color: #dbdbdb !important;
     }
     &.menu-belowheader{
         @media only screen and (min-width: 992px){
@@ -285,7 +301,7 @@ nav{
                     &.menu-item {
                         padding-right: 60px;
 
-                        a{
+                        a {
                             font-size: 0.875rem;
                             font-weight: 400;
                             color: #000;
@@ -296,10 +312,10 @@ nav{
                                 margin-left: 10px;
                                 margin-bottom: -2px;
                             }
-                            &:hover{
+                            &:hover {
                                 color: #000;
 
-                                &:before {
+                                &::before {
                                     content: "";
                                     width: 100%;
                                     height: 1px;
@@ -308,8 +324,8 @@ nav{
                                     display: block;
                                     position: absolute;
                                     left: 0;
-                                    bottom: 0.5rem;
-                                    background-color: #298596;;
+                                    bottom: 0.375rem;
+                                    background-color: #298596;
                                 }
                             }
                             &.dropdown-item {
@@ -335,8 +351,9 @@ nav{
                         > a {
                             border-bottom: 1px solid #298596;
                             padding: 0;
-                            margin-right: 0.5rem;
                             margin-top: 0.5rem;
+                            padding-right: .5rem;
+                            padding-left: .5rem;
 
                             &:hover:before { bottom: 0; }
                         }
@@ -357,7 +374,7 @@ nav{
 
                 & > ul > li.menu-item a {
                     margin: 0;
-                    padding: 3px 12px;
+                    padding: 0.625rem 1.5rem !important;
 
                     &:before { display: none !important; }
 
@@ -421,6 +438,7 @@ nav{
 
     nav.menu-belowheader #menubelowHeader > ul > li.menu-item a {
         max-width: 240px;
+        width: 100%;
         overflow: hidden;
     }
 
@@ -809,6 +827,20 @@ nav{
     }
 }
 
+// Sub menu animation for menu headers
+@keyframes sub-menu-expand {
+    from {
+        overflow-y: hidden;
+        opacity: 0.5;
+        max-height: 0px;
+    }
+    to {
+        overflow-y: auto;
+        opacity: 1;
+        max-height: 600px;
+    }
+}
+
 @import "_gutenberg-support";
 
 @import "_comments";