Merge pull request #26 from UR-dandyhacks/hotfix/mlh-banner-z-index

Fix the z-index of the MLH badge and navigation menu
UR-dandyhacks · Oct 15, 2023 · 82c72b9 · 82c72b9
2 parents b2d2551 + ff7b03d
commit 82c72b9
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;
 }