update responsive navbar
This commit is contained in:
parent
4bb87b3dc6
commit
cee20fb7e0
|
@ -89,25 +89,28 @@ header {
|
|||
.nav > .nav-list {
|
||||
display: flex;
|
||||
margin: 0 1rem 0 auto;
|
||||
gap: 2rem;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav > .nav-list > a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
padding: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.nav > .nav-list > a:hover {
|
||||
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
|
||||
|
||||
}
|
||||
|
||||
.nav > .nav-list > a > li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.nav > .nav-list > a > li:hover {
|
||||
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
|
||||
padding: 0.5rem 0.75rem 0.5rem 0.75rem;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.nav > #nav-check {
|
||||
display: none;
|
||||
}
|
||||
|
@ -146,7 +149,7 @@ header {
|
|||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
gap: 0.25rem;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: all 0.3s ease-in;
|
||||
|
@ -156,13 +159,13 @@ header {
|
|||
background-color: light-dark(var(--light-nav-bg-color), var(--dark-nav-bg-color));
|
||||
}
|
||||
|
||||
.nav > .nav-list > a > li {
|
||||
.nav > .nav-list > a {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
padding: 0.5rem 0.75rem 0.5rem 0.75rem;
|
||||
margin-bottom: 0.35rem;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.nav > .nav-list > a > li:hover {
|
||||
.nav > .nav-list > a:hover {
|
||||
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue