Use CSS3 transform instead of change in width for masthead menu underline effect

2016-05-31 12:31:39 -04:00 · 2016-05-31 12:31:39 -04:00 · 68b02cd8d8
commit 68b02cd8d8
parent 213e2fe3f3
2 changed files with 6 additions and 6 deletions
--- a/assets/_scss/_navigation.scss
+++ b/assets/_scss/_navigation.scss
@ -227,17 +227,17 @@
      &:before {
        content: "";
        position: absolute;
+        left: 0;
        bottom: 0;
        height: 4px;
        background: mix(#fff, $primary-color, 50%);
-        width: 0;
+        width: 100%;
        transition: $global-transition;
+        transform: scaleX(0); // hide
      }

-      &:hover {
-        &:before {
-          width: 100%;
-        }
+      &:hover:before {
+        transform: scaleX(1); // reveal
      }
    }
  }
--- a/assets/css/main.css
+++ b/assets/css/main.css