🐛 fix z-index

styles/Navbar.module.css

@@ -1,153 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
+@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap";.Navbar{height:100px;width:100%;display:flex;align-items:center;justify-content:space-around;flex-direction:row;border-bottom:1px solid #eaeaea}.Navbar .container{display:flex;align-items:center;justify-content:space-around;flex-direction:row}.Navbar .container .Logo{width:200px;margin:1rem;cursor:pointer}.Navbar .container .MenuToggle{transition:all .5s}.Navbar .container .MenuToggle span{display:block;width:33px;height:4px;margin-bottom:5px;position:relative;background:#cdcdcd;border-radius:3px;z-index:1;transform-origin:4px 0px;transition:transform .5s cubic-bezier(0.77, 0.2, 0.05, 1),background .5s cubic-bezier(0.77, 0.2, 0.05, 1),opacity .55s ease}.Navbar .container .MenuToggle span:first-child{transform-origin:0% 0%}.Navbar .container .MenuToggle span:nth-last-child(2){transform-origin:0% 100%}.Navbar .container .MenuActive{transform:rotate(90deg)}.Navbar .Nav{font-family:"Poppins",sans-serif;font-size:1.2rem;font-weight:600;display:flex;justify-content:space-around;align-items:center;flex-direction:row;z-index:99}.Navbar .Nav a{padding:1rem;transition:all .2s}.Navbar .MenuOpen{width:100%;display:flex !important;position:absolute;top:100px;background-color:#057ca6;color:#fff}@media(min-width: 768px){.container{width:auto}.container .MenuToggle{display:none}.Nav a:hover{cursor:pointer;color:#057ca6}.NavActive{color:#057ca6}}@media(max-width: 768px){.Navbar .Nav{flex-direction:column;display:none}.Navbar{flex-direction:column}.container{width:100%}.container .MenuToggle{display:block}.NavActive{color:#eaeaea}}
-.Navbar {
-  height: 100px;
-  width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  border-bottom: 1px solid #eaeaea;
-}
-
-.Navbar .container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.Navbar .container .Logo {
-  width: 200px;
-  margin: 1rem;
-  cursor: pointer;
-}
-
-.Navbar .container .MenuToggle {
-  -webkit-transition: all 0.5s;
-  transition: all 0.5s;
-}
-
-.Navbar .container .MenuToggle span {
-  display: block;
-  width: 33px;
-  height: 4px;
-  margin-bottom: 5px;
-  position: relative;
-  background: #cdcdcd;
-  border-radius: 3px;
-  z-index: 1;
-  -webkit-transform-origin: 4px 0px;
-          transform-origin: 4px 0px;
-  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
-  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
-  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
-  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
-}
-
-.Navbar .container .MenuToggle span:first-child {
-  -webkit-transform-origin: 0% 0%;
-          transform-origin: 0% 0%;
-}
-
-.Navbar .container .MenuToggle span:nth-last-child(2) {
-  -webkit-transform-origin: 0% 100%;
-          transform-origin: 0% 100%;
-}
-
-.Navbar .container .MenuActive {
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
-}
-
-.Navbar .Nav {
-  font-family: "Poppins", sans-serif;
-  font-size: 1.2rem;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.Navbar .Nav a {
-  padding: 1rem;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.Navbar .MenuOpen {
-  width: 100%;
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  position: absolute;
-  top: 100px;
-  background-color: #057ca6;
-  color: white;
-}
-
-@media (min-width: 768px) {
-  .container {
-    width: auto;
-  }
-  .container .MenuToggle {
-    display: none;
-  }
-  .Nav a:hover {
-    cursor: pointer;
-    color: #057ca6;
-  }
-  .NavActive {
-    color: #057ca6;
-  }
-}
-
-@media (max-width: 768px) {
-  .Navbar .Nav {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    display: none;
-  }
-  .Navbar {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-  }
-  .container {
-    width: 100%;
-  }
-  .container .MenuToggle {
-    display: block;
-  }
-  .NavActive {
-    color: #eaeaea;
-  }
-}
-/*# sourceMappingURL=Navbar.module.css.map */

styles/Navbar.module.scss

@@ -63,6 +63,8 @@
 		justify-content: space-around;
 		align-items: center;
 		flex-direction: row;
+
+		z-index: 99;
 		a {
 			padding: 1rem;
 			transition: all 0.2s;