🐛 fix z-index
This commit is contained in:
stefan080106
@@ -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 */
|
||||
@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}}
|
||||
Reference in New Issue
Block a user