simplify navigation css

Author: mtf90

_includes/header.html

@@ -23,14 +23,14 @@ <h1 class="site-title">
                 <ul id="menu-header" class="menu">
                     {% for entry in site.data.navigation %}
                     {% if entry.items[0] %}
-                    <li class="menu-item menu-item-has-children{% if page.navbar-group == entry.title %} current-menu-ancestor current_page_ancestor{% endif %}">
+                    <li class="menu-item menu-item-has-children{% if page.navbar-group == entry.title %} active{% endif %}">
                         <a href="{{ entry.items[0].url | relative_url }}">{{ entry.title }}</a>
                         <div class="sub-menu-wrapper">
                             <div class="container">
                                 <ul class="sub-menu">
                                     {% for item in entry.items %}
                                     <li>
-                                        <a class="menu-item{% if item.url == page.url %} current-menu-item{% endif %}"
+                                        <a class="sub-menu-item{% if item.url == page.url %} active{% endif %}"
                                            href="{{ item.url | relative_url }}">{{ item.title }}</a>
                                     </li>
                                     {% endfor %}
@@ -39,7 +39,7 @@ <h1 class="site-title">
                         </div>
                     </li>
                     {% else %}
-                    <li class="menu-item{% if page.navbar-group == entry.title %} current-menu-item current_page_item current_page_parent{% endif %}">
+                    <li class="menu-item{% if page.navbar-group == entry.title %} active{% endif %}">
                         <a href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
                     </li>
                     {% endif %}

_sass/navigation.scss

@@ -30,17 +30,13 @@
   display: inline-block;
 }
 
-#site-navigation .sub-menu {
-  display: none;
-}
-
-#site-navigation .current_page_ancestor {
-  margin-bottom: 3.5rem;
+#site-navigation .menu-item.active .sub-menu {
+  display: block;
 }
 
-#site-navigation .current_page_ancestor .current-menu-item {
-  font-weight: 700;
-  color: $light;
+#site-navigation .menu-item.active > a {
+  position: relative;
+  background: darken($primary, 5%);
 }
 
 #site-navigation .menu-item-has-children > a:after {
@@ -50,16 +46,7 @@
   transition: transform .2s;
 }
 
-#site-navigation .current_page_ancestor .sub-menu, #site-navigation .current_page_parent .sub-menu {
-  display: block;
-}
-
-#site-navigation .current_page_ancestor > a, #site-navigation .current_page_parent > a {
-  position: relative;
-  background: darken($primary, 5%);
-}
-
-#site-navigation .current_page_ancestor > a:after, #site-navigation .current_page_parent > a:after {
+#site-navigation .menu-item-has-children.active > a:after {
   transform: rotate(90deg);
 }
 
@@ -79,74 +66,75 @@
   display: block;
 }
 
-#site-navigation .current-menu-ancestor .sub-menu-wrapper a {
-  @extend .rounded;
+#site-navigation .sub-menu {
+  display: none;
+}
+
+#site-navigation .sub-menu-item.active {
+  font-weight: 700;
 }
 
-#site-navigation .sub-menu-wrapper .sub-menu a:hover {
+#site-navigation .sub-menu a:hover {
   background: rgba(0, 0, 0, 0.1);
 }
 
+#site-navigation .active .sub-menu a {
+  @extend .rounded;
+}
+
 @include media-breakpoint-down(lg) {
   #site-navigation .menu {
     display: block;
   }
 
-  #site-navigation .current_page_ancestor {
+  #site-navigation .active {
     margin-bottom: 0;
   }
 
   #site-navigation .sub-menu-wrapper {
     position: relative;
   }
 
-  #site-navigation ul {
+  #site-navigation ul, #site-navigation ul li, #site-navigation ul li a {
     position: relative;
     display: block;
   }
-
-  #site-navigation ul li, #site-navigation ul li a {
-    display: block;
-  }
 }
 
 @include media-breakpoint-up(lg) {
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover {
-    background: $light;
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover a {
-    color: $body-color;
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover a:after {
-    transform: rotate(90deg);
+  #site-navigation .menu-item.menu-item-has-children.active {
+    margin-bottom: 3.5rem;
   }
 
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover .sub-menu-wrapper {
-    display: block;
-    position: absolute;
-    z-index: 2;
-    left: auto;
-    width: auto;
+  #site-navigation .menu-item-has-children:not(.active):hover {
     background: $light;
-    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover .sub-menu-wrapper .container {
-    padding: 0;
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover .sub-menu-wrapper .sub-menu {
-    display: block;
-    padding: 0;
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover .sub-menu-wrapper .sub-menu li {
-    display: block;
-  }
-
-  #site-navigation .menu-item-has-children:not(.current-menu-ancestor):hover .sub-menu-wrapper .sub-menu li a {
-    padding: 1rem 1.5rem;
+    & a {
+      color: $body-color;
+      &:after {
+        transform: rotate(90deg);
+      }
+    }
+    & .sub-menu-wrapper {
+      display: block;
+      position: absolute;
+      z-index: 2;
+      left: auto;
+      width: auto;
+      background: $light;
+      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
+      & .container {
+        padding: 0;
+      }
+      & .sub-menu {
+        padding: 0;
+        display: block;
+        & li {
+          display: block;
+          & a {
+            padding: 1rem 1.5rem;
+          }
+        }
+      }
+    }
   }
 }