Browse Source

navbar: fix scroll-up gap — self-relative transform hide/show (was hardcoded -85px)

The navbar grew to 89px (font-size bumps) but .navbar.fixed hid it with a
hardcoded top:-85px, and .visible showed it via translateY(100%); the 4px
mismatch left a gap above the header on scroll-up. Switched to translateY(-100%)
to hide and translateY(0) to show — both self-relative, so it aligns at any
navbar height.
windhamdavid 1 week ago
parent
commit
2d815daa04
2 changed files with 4 additions and 9 deletions
  1. 4 9
      style.css
  2. 0 0
      v4-style.min.css

+ 4 - 9
style.css

@@ -523,17 +523,12 @@ body.desk .container.leader {
 }
 .navbar.fixed {
   position: fixed;
-  top: -85px;
-	-webkit-transition: all .3s ease-in-out;
-	-moz-transition: all .3s ease-in-out;
-	transition: all .3s ease-in-out;
+  top: 0;
+  transform: translate3d(0, -100%, 0); /* hide upward, self-relative — no hard-coded height */
+  transition: transform .3s ease-in-out;
 }
 .navbar.visible {
-  -webkit-transform: translate3d(0, 100%, 0);
-  -moz-transform: translate3d(0, 100%, 0);
-  -ms-transform: translate3d(0, 100%, 0);
-  -o-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 0, 0); /* slide back to top:0 regardless of navbar height */
   background-color: rgba(72, 76, 87, 0.7);
 }
 #nav {

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff