From 358d5421cf584a60e00b5ae231de85d91aeb1247 Mon Sep 17 00:00:00 2001 From: stefan080106 Date: Thu, 19 May 2022 16:38:36 +0200 Subject: [PATCH] :bug: fix z-index --- styles/Navbar.module.css | 154 +------------------------------------- styles/Navbar.module.scss | 2 + 2 files changed, 3 insertions(+), 153 deletions(-) diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css index bd2913a..8ae9bdd 100644 --- a/styles/Navbar.module.css +++ b/styles/Navbar.module.css @@ -1,153 +1 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap"); -.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 */ \ No newline at end of file +@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}} \ No newline at end of file diff --git a/styles/Navbar.module.scss b/styles/Navbar.module.scss index 1586942..977496e 100644 --- a/styles/Navbar.module.scss +++ b/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;