Fix the z-index of the MLH badge and navigation menu

Before, the items in the FAQ and Sponsoring sections would appear on top of the navigation menu, and the MLH badge is below those items. This change introduces fixes such that the navigation menu is always on top of everything else, and the MLH badge on top of the section items.
UR-dandyhacks · Oct 15, 2023 · ff7b03d · ff7b03d
1 parent b2d2551
commit ff7b03d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -9,12 +9,12 @@
 </head>
 
 <body class="font-sans text-lavender bg-deep-purple">
-  <nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
+  <nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
     <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
     <div>
-      <input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
+      <input class="absolute w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
       <img class="lg:hidden" src="img/icons/hamburger.png" />
-      <ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
+      <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
         <li class="text-right"><a href="#about">About</a></li>
         <li class="text-right"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
@@ -28,6 +28,7 @@ <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
           right: 50px;
           top: 100%;
           width: 10%;
+          z-index: 20;
         "
       href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
       target="_blank"><img

diff --git a/styles.css b/styles.css
@@ -671,6 +671,14 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 20;
 }
 
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
 .float-right {
   float: right;
 }