Browse Source

work nav: thin top bar + click-through fix

- #worknav offcanvas collapses to a 68px bar (bottom:auto releases the
  base .offcanvas bottom:0 so height:auto no longer stretches full-height)
- z-index 990 keeps the side-nav 'Who' link painted above where they overlap
- pointer-events:none on the full-width .header-small bar (auto on its
  links/hamburger) so both navs stay clickable
windhamdavid 2 weeks ago
parent
commit
35ae5e837b
1 changed files with 5 additions and 2 deletions
  1. 5 2
      index.html

+ 5 - 2
index.html

@@ -106,8 +106,11 @@
 <style>
   /* variable Playfair (opsz pinned to 20) so the top nav matches the main site's nav */
   @font-face { font-family: 'Playfair Var'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/playfair-display-var.woff2') format('woff2'); }
-  #worknav.work-nav { height: auto; min-height: 0; background: rgba(72,76,87,.9); backdrop-filter: blur(6px); border: 0; }
-  #worknav .offcanvas-body { padding: 1.1rem 1rem; }
+  #worknav.work-nav { height: auto; bottom: auto; min-height: 0; max-height: none; background: rgba(72,76,87,.9); backdrop-filter: blur(6px); border: 0; z-index: 990; } /* bottom:auto releases the base .offcanvas bottom:0 so it doesn't stretch full-height; z-index below .header-small (999) so the side-nav "Who" link paints on top where they overlap */
+  /* .header-small is a full-width bar at z-index 999; with the top nav now at 990, its empty center would swallow clicks meant for the top-nav links. Make the bar transparent to pointer events but keep its real links/hamburger clickable. */
+  .header-small { pointer-events: none; }
+  .header-small a, .header-small .hamburger { pointer-events: auto; }
+  #worknav .offcanvas-body { padding: 1.1rem 1rem; flex: 0 0 auto; }
   .work-nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.2rem; margin: 0; }
   .work-nav-links a { color: #fff; text-decoration: none; font-family: 'Playfair Var', 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; }
   .work-nav-links a:hover { color: #25c2a0; }